仅突出显示单击的 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>

javascript

var 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) {&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; var id = $(this).prop('id'); //get the id of clicked div&nbsp; &nbsp; // use ajax request to fetch desired data&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp;url: '/urlToYourExternalPage',&nbsp; &nbsp; &nbsp;type: 'POST',&nbsp; &nbsp; &nbsp;data: {id: id},&nbsp; &nbsp; &nbsp;success: function( response ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;response = JSON.parse( response );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// get the data from response&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// create the html from data&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var html = ....;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// apend the html to target div&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(this).append(html);&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp;error: function (xhr, status, error) {&nbsp; &nbsp; &nbsp; &nbsp; console.log( xhr.responseText );&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp;});&nbsp; &nbsp; &nbsp; });