Question

我在叠加层中有一些复选框，只要未选中<img>，就不应该看到<a>标记。

<a>和<img>代码的HTML：

<div id="extra">    
    <a href="detail.html?event=theater&datum=01_01" class = "theater">
        <img src="img/theater.png" alt="Theater">
    </a>
    <img src="img/literatur.png" alt="Literatur">
</div>

这是复选框：

<div class="tags">
    <label>
        <input  type="checkbox" rel="alles" id="checkme"/>
        Alles
    </label>
</div>

这就是功能：

$("#extra").css("display","none");
$("#checkme").click(function(){
    if ($("#checkme").is(":checked"))
    {
        $("#extra").show("fast");
    } else{
         $("#extra").hide("fast");
    }
});

我也尝试过其他一些方法，但没有任何帮助。

Answer 1

我认为这更优雅

$("#extra").hide();
$("#checkme").on("click",function(){
  $("#extra").toggle(this.checked);
});

我假设您在渲染相关对象后执行上述操作，否则您需要

＆＃13;

$(function() {
  $("#extra").hide();
  $("#checkme").on("click",function(){
    $("#extra").toggle(this.checked);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="extra">    
    <a href="detail.html?event=theater&datum=01_01" class = "theater">
        <img src="http://png-1.findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/theatre_masks.png" alt="Theater">
    </a>
    <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/128/Books-2-icon.png" alt="Literatur">
</div>

<div class="tags">
    <label>
        <input  type="checkbox" rel="alles" id="checkme"/>
        Alles
    </label>
</div>

＆＃13;

Answer 2

这个小提琴http://jsfiddle.net/yfnen44e/有一个有效的例子。我假设您只想隐藏#extra中的链接图像，而不是整个div。

var $extra = $('#extra a').hide();
$('#checkme').on('click', function (){
   $extra.toggle(this.checked);
});

Answer 3

尝试此更改：您的代码已放入$(document).ready(function () {your code here});

$(document).ready(function () {
    $("#extra").css("display", "none");
    $("#checkme").click(function () {
        if ($("#checkme").is(":checked")) {
            $("#extra").show("fast");
        } else {
            $("#extra").hide("fast");
        }
    });
});

live demo

Answer 4

有很多方法可以做到这一点，其中一种方法是使用jQuery .prop 方法来获取属性的值。

＆＃13;

  $("#checkme").click(function() {
    if ($("#checkme").prop('checked')) {
      $("#extra").show("fast");
    } else {
      $("#extra").hide("fast");
    }
  });

＆＃13;

#extra {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="extra">
  <a href="detail.html?event=theater&datum=01_01" class="theater">
    <img src="img/theater.png" alt="Theater" />
  </a>

  <img src="img/literatur.png" alt="Literatur" />
</div>
<div class="tags">
  <label>
    <input type="checkbox" rel="alles" id="checkme" />Alles</label>
</div>

＆＃13;

注意：使用jQuery .CSS 会在文档中添加内联CSS。

如果未选中该复选框，则隐藏标签和img

4 个答案: