Question

我的网站中有一个简单的图像切换器，结构如下：

HTML

<div id="modal">
    <div id="colors">
        <ul class="product-image-thumbs">
            <li>
                <a href="#">
                   <img src="thumb-0.jpg" id="thumb-0" class="gallery-image">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="thumb-1.jpg" id="thumb-1" class="gallery-image">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="thumb-2.jpg" id="thumb-2" class="gallery-image">
                </a>
            </li>
        </ul>
    </div>

    <div class="photo">
        <img src="current_img" id="1">
    </div>
</div>

的jQuery

jQuery(document).ready(function(){
   jQuery(".gallery-image").click(function(){
      $(".photo > img").prop("src", jQuery(this).prop("src"));
   });
});

我认为它工作正常，直到我看到它改变了与照片类在div中显示的img scources。

案例是，在我的网上商店的产品列表中，产品有自己的div，因此选择器会在网站上多次出现。

我尝试过以下事情

jQuery(this).next(".photo > img").prop("src", jQuery(this).prop("src"));
jQuery(this).find(".photo > img").prop("src", jQuery(this).prop("src"));

但两个都没有用，因为它找不到元素

Answer 1

您目前正在尝试在.photo > img内找到.gallery-image，因此无法匹配。

您更愿意直接选择您的元素：$('.photo > img')。

示例：

$(document).ready(function(){
   $(".gallery-image").click(function(){

     $('.photo > img').prop("src", $(this).prop("src"));
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="modal">
    <div id="colors">
        <ul class="product-image-thumbs">
            <li>
                <a href="#">
                   <img src="http://placekitten.com/g/200/200" id="thumb-0" class="gallery-image">
                </a>
            </li>
             <li>
                <a href="#">
                 <img src="http://placekitten.com/g/200/200" id="thumb-1" class="gallery-image">
             </a>
         </li>
          <li>
              <a href="#">
                  <img src="http://placekitten.com/g/200/200" id="thumb-2" class="gallery-image">
              </a>
         </li>
     </ul>
</div>

<div class="photo">
    <img src="current_img" id="1">
</div>

Answer 2

试试这个

HTML：

<div class="photo">
    <img src="" id="current_img">
</div>

的Javascript：

jQuery(document).ready(function(){
   jQuery(".gallery-image").click(function(){
      $('#current_img').prop("src", jQuery(this).prop("src"));
   });
});

Answer 3

Jquery（this）指的是你刚刚点击的内容...所以将parent（）遍历到围绕整个块的最外层div，然后遍历到你的.photo＆gt; IMG。

jQuery(document).ready(function(){
  jQuery(".gallery-image").click(function(){
     jQuery(this).parents("#modal").find(".photo > img").prop("src", jQuery(this).prop("src"));
  });
});

Answer 4

我们的想法是使用<div>查找父级.closest()，然后使用<div class="photo">使用.next()，然后使用<img>使用.find()查找父级$(document).ready(function() { $(".gallery-image").click(function() { var photoDiv = $(this).closest('ul').parent().next('div.photo'); photoDiv.find('img').prop("src", $(this).prop("src")); }); }); 1}}：

Fiddle

<div id="modal">

注意：此代码对HTML结构非常敏感。例如，如果<div class="modal">在所有<div>中都是$(document).ready(function() { $(".gallery-image").click(function() { var photoDiv = $(this).closest('.modal').find('.photo'); photoDiv.find('img').prop("src", $(this).prop("src")); }); });，那么它会更短更安全：

{{1}}

jQuery查找选择器

4 个答案: