javascript - 显示 div1 并复制代码 pb jquery 时关闭其他 div

Question

我有 2 个问题
1.首先我需要只允许一个 div 打开，所以当 div question1 是 show div question2 并且所有其他应该隐藏时，实际上它不是我糟糕的代码的情况:)。

2.第二个问题，当“被检查”时，我实现了一个带有addclass的代码，但实际上我为每个div复制了所有代码。也许有人有一个更好的选择来合并代码并避免重复代码。

   $(".checkbox").hide();
    $(".question").show();

    $('.question').click(function(){
    $(".checkbox").toggle(10);
    });


$('#test').change(function(){
    if($(' input[type=checkbox]:checked').length) {
        $('div.question').addClass("question-active");
    } else {
        $('div.question').removeClass("question-active");
    }
});

$(".checkbox2").hide();
    $(".question2").show();

    $('.question2').click(function(){
    $(".checkbox2").toggle(10);
    });


$('#test2').change(function(){
    if($(' input[type=checkbox]:checked').length) {
        $('div.question2').addClass("question-active");
    } else {
        $('div.question2').removeClass("question-active");
    }
});

这是我的代码：http: //jsfiddle.net/5C3p9/3/

感谢帮助

问候

Answer 1

如果您想保持 HTML 标记原样，这应该可以：

// The ^= selector is used to select the elements which have the
// property starting with the text provided. 
// ie: class starting with checkbox

$("div[class^='checkbox']").hide();
$("div[class^='question']").show();

$("div[class^='question']").click(function () {
    // This way you are able to close the clicked one itself
    $("div[class^='checkbox']").not($(this).next()).hide();
    $(this).next("div[class^='checkbox']").toggle(10);
});

$("ul[id^='test']").change(function () {
    // You can use the .toggleClass() method giving the class name
    // and a boolean (add/remove) as parameters
    $(this)
        .parents()
        .prev("div[class^='question']")
        .toggleClass("question-active", $("input[type='checkbox']:checked").length != 0);
});

演示：http: //jsfiddle.net/5C3p9/7/

编辑：我在代码中添加了一些注释。

Answer 2

我对你的代码做了一些修改。我所做的是我添加了一些 HTML 类并使 javascript 更通用并遍历 HTML 而不是直接指向元素。

这是 jsFiddle：http: //jsfiddle.net/E595w/1/

新的 HTML：

<div class="question"></div>
<div class="checkbox">
    <ul id="test" class="test">
      <li>
          <input  type="checkbox" name="question-1" value="1"> is it vegetables ? 
      </li>
      <li>
          <input  type="checkbox" name="question-2" value="2"> is it melon ?
      <li>
    </ul>
 </div>

<div class="question"></div>
<div class="checkbox">
    <ul id="test2" class="test">
      <li>
          <input  type="checkbox" name="question-1" value="1"> is it vegetables ? 
      </li>
      <li>
          <input  type="checkbox" name="question-2" value="2"> is it melon ?
      <li>
    </ul>
 </div>

这是生成的 Javascript：

$(".checkbox").hide();
$(".question").show();

$('.question').click(function(){
    $('.checkbox').hide();
    $(this).next(".checkbox").toggle(10);
});


$('.test').change(function(){
    if($(' input[type=checkbox]:checked').length) {
        $(this).parents('.checkbox').prev('div.question').addClass("question-active");
    } else {
        $(this).parents('.checkbox').prev('div.question').removeClass("question-active");
    }
});

编辑：用代码更新以回答您的 #1 问题。请参阅 jsFiddle 的更新链接。

Answer 3

一些小的 dom 变化

<div class="quest question"></div>
<div class="ans checkbox">
    <ul id="test">
        <li>
            <input  type="checkbox" name="question-1" value="1" 
            /> is it vegetables ? 
        </li>
        <li>
            <input  type="checkbox" name="question-2" value="2" 
            /> is it melon ?
        </li>
    </ul>
</div>

<div class="quest question2"></div>
<div class="ans checkbox2">
    <ul id="test2">
        <li>
            <input  type="checkbox" name="question-1" value="1" 
            /> is it vegetables ? 
        </li>
        <li>
            <input  type="checkbox" name="question-2" value="2" 
            /> is it melon ?
        </li>
    </ul>
</div>

然后

$(".quest").show();
$(".ans").hide();

$('.quest').click(function(){
    $(this).next().toggle(10);
});

$('.ans').change(function(){
    var $ans = $(this).closest('.ans');
    $ans.prev().toggleClass('question-active', $ans.find('input:checkbox:checked').length > 0)
});

演示：小提琴

Answer 4

把你所有的问题都放在同一个班级.question

如果您想区分问题，请改用 ids

另外，放入所有答案容器 .checkbox

然后使用这个功能可以解决问题，无论你有多少

$('.question').click(function(){
    $(".checkbox").hide();
    $(this).next(".checkbox").show(10);
});