仅突出显示单击的 div

Question

我有以下代码，我想突出显示点击的 div 而不是其他的。我还想从外部页面获取数据并将其加载到目标 div 中……不知道如何将这部分添加到脚本中。目前这就是我所拥有的。php<div id="targetdiv"></div>  <div class="item">for($id=0; $id<10; $id++){    echo  '<div class="al-cover slides" id="img'.$id.'" >               <img class="imgs" src="'.$mediapath.'" alt="" onclick="img('.$id.')" data-id="'.$id.'"/>';                                      </div>';}</div>javascriptvar slideIndex = 1;function img(index) {  show(index);}function nextslide(index) {  show(slideIndex += index);}function show(index) {  // Get the container element  var selextImg = document.getElementById("img" + index);  $('.items').each(function() {    numItems = $(this).find('.picks').length;    selextImg.style.border = "solid 2px #3cba54";  });  if (index > numItems) {    slideIndex = 1;    index = 1;  }  if (index < 1) {    slideIndex = numItems;    index = numItems;  }  var path = $("#img" + index).find('img').attr('src');  $("#targetdiv").html('<img src="' + path + '"  class="fit"/>');}

Answer 1

将公共类添加到所有应具有突出显示选项的 div

<div class="al-cover">...</div>

为类添加点击事件监听器（jquery 示例）

$(document).on('click', '.al-cover', function (event) {

    event.preventDefault();

    var id = $(this).prop('id'); //get the id of clicked div

    // use ajax request to fetch desired data

    $.ajax({

     url: '/urlToYourExternalPage',

     type: 'POST',

     data: {id: id},

     success: function( response ) {

         response = JSON.parse( response );

         // get the data from response

         // create the html from data

         var html = ....;

         // apend the html to target div

         $(this).append(html);  

     },

     error: function (xhr, status, error) {

        console.log( xhr.responseText );

     }

   });

      });