Question

我是一名设计师，正在尝试学习Jquery，而我遇到了当前项目的问题。我需要能够单击一个复选框，然后再显示一个div。对于每个复选框，单击必须生成不同的div。我认为开关功能可以解决问题，但我无法弄清楚如何实现它。以下是我到目前为止的情况：

<div">
    <input type="checkbox" id="test1" />
</div>
<div>
    <input type="checkbox" id="test2" />
</div>

<script type="text/javascript">

$(function () {
    $(':checkbox').click(function () {
        if ($(this).prop('checked', true)) {
            switch(this.id) {

                    case "test1";
                    var newDiv = $('<div><p>it worked!!</p></div>');

            break;

            case "test2";
                    var newDiv = $('<div><p>it worked again!!</p></div>');

            break;

            default;
            }
            newDiv.insertAfter($(this));

            $(this).after(newDiv);
        } else {
            $(this).next().filter('div').remove();
        }
    });
});

</script>

我希望有人可以提供帮助！

Answer 1

为什么不为这些特定ID设置点击功能？

$("#test1").click(function(){  $("your div1").show(); });
$("#test2").click(function(){  $("your div1").show(); });

Answer 2

错误太多了......

第一个问题是：

switch(this.id)

应该是：

switch($(this).attr('id')) // Need to wrap in jQuery object

此外，您的switch语句错误。请注意:之后的case而不是;。

switch(n) {
    case 1:
        // Something
        break;
    case 2:
        // Something
        break;
    default:
        // Something
}

您需要在switch语句之外声明newDiv以便稍后访问它。然后，这些一个接一个没有意义，他们做同样的事情

newDiv.insertAfter($(this)); // Keep this one
$(this).after(newDiv);

而且，你的html中有一个额外的"，这可能是错误的......

<div">

最后，你混合使用双引号和单引号，这会让你头疼。我建议你选择其中一种。

Answer 3

这样的事可能吗？

<div>
    <input type="checkbox" id="test2" />
    <span style="display:none;"><div><p>it worked!</p></div></span>
</div>
<div>
    <input type="checkbox" id="test2" />
    <span style="display:none;"><div><p>it worked again!</p></div></span>
</div>
$(function () {
 $(':checkbox').click(function () {
  if ($(this).prop('checked', true)) {
   $(this).after($(this).next('span'));
  }
 });
});

Answer 4

这是另一种解决方案：

<div>
  <input type="checkbox" id="div1" />
</div>

<div data-id='div1' style='display:none;'><p>it worked!</p></div>
<div data-id='div2' style='display:none;'><p>it worked again!</p></div>


$(function () {
  $(':checkbox').click(function () {
    var $box = $(this);    
    $("div[data-id='"+$box.attr('id')+"']").show();
  });
});

JQuery - 根据选中的复选框切换案例

4 个答案: