Question

我有很多imgs。点击其中一个将其关闭（将不透明度更改为0.3）

<div id="main_results">
    <img src="images/icon-ski.png" data-id="type7" class="img-checkbox" />
    <img src="images/icon-weekend.png" data-id="type4" class="img-checkbox" />
    <img src="images/icon-organized.png" data-id="type6" class="img-checkbox" />

    <div class="type4">....</div>
    <div class="type2">....</div>
    <div class="type3">....</div>
    <div class="type3">....</div>
    <div class="type4">....</div>
</div>

我也有很多次潜水：

我想隐藏不包含具有相同＆＃34; data-id＆＃34;的类的div。作为点击的img。对于即时 - 当我点击第二个img时，应该隐藏所有带有class = type4的div。

$(".img-checkbox").click(function () {
    var img = $(this);

    if (img.prev().prop("checked")) {
        img.css({
            'opacity': '0.3'
        });
        alert (img.attr("data-id"));
    } else {
        img.css({
            'opacity': '1.0'
        });
    }
});

Answer 1

你可以这样做：

向img添加点击事件监听器。
使用data-id获取$(this).data("id")并使用.作为前缀。
隐藏匹配的div并将this的CSS设置为0.3。

这里的代码段：

$(function () {
  $("img").click(function () {
    $(this).css("opacity", 0.3);
    $("." + $(this).data("id")).hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_results">
  <img src="//placehold.it/100?text=type7" data-id="type7" class="img-checkbox" />
  <img src="//placehold.it/100?text=type4" data-id="type4" class="img-checkbox" />
  <img src="//placehold.it/100?text=type6" data-id="type6" class="img-checkbox" />

  <div class="type4">type4</div>
  <div class="type2">type2</div>
  <div class="type3">type3</div>
  <div class="type3">type3</div>
  <div class="type4">type4</div>
</div>

Answer 2

请试试这个。

$(".img-checkbox").click(function () {
    var img = $(this);
    if (img.prev().prop("checked")) {
        img.css({
            'opacity': '0.3'
        });
        alert (img.attr("data-id"));
    } else {
        img.css({
            'opacity': '1.0'
        });
    }
    
    //hide all div which is contain 'type4' and any class.
    $('.'+img.attr("data-id")).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main_results">
    <img src="images/icon-ski.png" data-id="type7" class="img-checkbox" />
    <img src="images/icon-weekend.png" data-id="type4" class="img-checkbox" />
    <img src="images/icon-organized.png" data-id="type6" class="img-checkbox" />

    <div class="type4">..1..</div>
    <div class="type2">....</div>
    <div class="type3">....</div>
    <div class="type3">....</div>
    <div class="type4">..1..</div>
</div>

jquery隐藏没有类ID的div

2 个答案: