Question

我有选项列表：

<li class="">
     <img src="/1.img" />
     <img src="/2.img" />
     Option 1
</li>
<li class="">
     <img src="/1.img" />
     <img src="/2.img" />
     Option 2
</li>

默认情况下 - 1.img可见。如果用户选择例如选项1，我想1.img隐藏（）;和2.img to show（）;但仅适用于选项1。例如这段代码：

  $("#selection li").click(function(){
   $('.not-checked').hide(); // to hide image
   $('.checked').show(); // to show image
}

改变每一张照片。如何仅在选定的li上更改图片？

Answer 1

要仅定位您点击的<li>元素的子元素，您可以使用jQuery的 .find() 方法。您想要找到img元素，并且为了定位特定的<img>元素，您可以使用 :nth-of-type 伪类：

＆＃13;

$("#selection li").click(function() {
  $(this).find('img:nth-of-type(1)').hide(); // to hide image
  $(this).find('img:nth-of-type(2)').show(); // to show image
});

＆＃13;

img:nth-of-type(2) {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="selection">
  <li class="">
    <img src="http://via.placeholder.com/50/ff00000/ff00000" />
    <img src="http://via.placeholder.com/50/0000ff/0000ff" /> Option 1
  </li>
  <li class="">
    <img src="http://via.placeholder.com/50/ff00000/ff00000" />
    <img src="http://via.placeholder.com/50/0000ff/0000ff" /> Option 2
  </li>
</div>

＆＃13;

Answer 2

或者您可以在所有元素上使用'data-'属性，并在jquery中对它们进行比较。

<div id="selection">
<li class="" data-option="1">
    <img src="/1.img" data-option="1">
    <img src="/2.img" data-option="2">
    Option 1
</li>
<li class="" data-option="2">
    <img src="/1.img" data-option="1">
    <img src="/2.img" data-option="2">
    Option 2
</li>   </div>

从您的脚本

$("#selection li").click(function() {
    //first hide all images
    $(this).find("img").hide(); 
    //then show only the ones with the right data-option
    $(this).find("img[data-option="+$(this).data('option')+"]").show()
});

不过，你并不总是需要使用数据 - 它只是一个为标签赋予属性的jQuery约定。

Answer 3

您可以使用jQuery toggle()来实现它。

＆＃13;

$("li").click(function() {
  $(this).find("img").toggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="">
     <img src="http://via.placeholder.com/50/ff00000/ff00000" />
     <img style="display:none" src="http://via.placeholder.com/50/0000ff/0000ff" />
     Option 1
</li>
<li class="">
          <img src="http://via.placeholder.com/50/ff00000/ff00000" />
     <img style="display:none" src="http://via.placeholder.com/50/0000ff/0000ff" />

     Option 2
</li>

＆＃13;

说明：$(this)会让您点击<li>; find("img")将定位内部的所有图像; toggle()会更改任何定位display的{{1}};

JQuery在选择时更改图片

3 个答案: