Question

我是jquery初学者寻求帮助。这是我的HTML代码。

＆＃13;

<div class="swatch_options color">
  <div class="swatch clearfix" data-option-index="0"> <div class="option_title">color</div>  
  <input id="swatch-0-black-10566137741" type="radio" name="option-0" value="black" checked="">  
  <input id="swatch-0-maroon-10566137741" type="radio" name="option-0" value="maroon"> 
  <input id="swatch-0-green-10566137741" type="radio" name="option-0" value="green"> 
  <input id="swatch-0-blue-10566137741" type="radio" name="option-0" value="blue">
</div>
    
<div class="product_gallery_nav"> 
    <div class="gallery-cell is-nav-selected" data-title="black" style="">
    <img src="black1.jpg" alt="black" ></div>

    <div class="gallery-cell" data-title="black" style="">
    <img src="black2.jpg" alt="black clothing new" ></div> 

    <div class="gallery-cell">
    <img src="black3.jpg" alt="Slim Lapel Linen Blazer black">
    </div> 

    <div class="gallery-cell">
    <img src="maroon211.jpg" alt="maroon Linen Blazer ">
    </div> 

    <div class="gallery-cell">
    <img src="maroon23s2.jpg" alt="Slim  maroon Linen">
    </div> 

     <div class="gallery-cell">
    <img src="greeen11.jpg" alt="green Blazer ">
    </div> 

    <div class="gallery-cell">
    <img src="greeen1132.jpg" alt="Slim  green green">
    </div> 

     <div class="gallery-cell">
    <img src="blue1.jpg" alt="blue Blazer ">
    </div> 

    <div class="gallery-cell">
    <img src="blue2.jpg" alt="Slim  blue green">
    </div> 

</div>

＆＃13;

我想要实现的目标。

我想要隐藏所有＆＃34; gallery-cell＆＃34;如果gallery-cell图像alt内容文本与＆＃34; color＆＃34;匹配输入值匹配。例如 - 值=＆＃34;黑色＆＃34; = alt =＆＃34;黑衣新品＆＃34;

完成 ~~第二名。展示那些＆＃34; gallery-cell＆＃34;如果选中=＆＃34;＆＃34;~~

完成 ~~第3名。 show hide＆＃34; gallery-cell＆＃34;检查时div =＆＃34;＆＃34;~~

这是我的第一个问题，如果有什么不对，请帮我清理这个问题。
谢谢你。

Answer 1

使用jQuery很容易，试试这个：

$(function() {
  $('input[name="option-0"]').on('change',function() {
    var val = $(this).val();
    $('img').hide().filter('[alt*="'+val+'"]').show();
  });
});

希望这有帮助！

小提琴示例： https://www.bootply.com/qzi0UdlYa3

Jquery匹配内容并显示隐藏div

1 个答案: