JQuery - 取決於複選框選中的開關盒

我是一名試圖學習Jquery的設計師，我遇到了當前項目的問題。我需要能夠點擊一個複選框，然後顯示一個div。對於每個點擊複選框，必須生成一個不同的div。我認爲一個開關函數可以做到這一點，但我一直沒有弄清楚如何實現它。這是我到目前爲止：JQuery - 取決於複選框選中的開關盒

<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>

我希望有人能幫助！

來源

2012-02-10 art_wired

這麼多錯那麼一點......

第一個問題是：

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">

最後，你在混合雙引號和單引號，這會在稍後給你帶來麻煩。我建議你選擇一個或另一個。

來源

2012-02-10 23:13:13 elclanrs

非常感謝elclanrs，我不得不把頭圍在你的肛門周圍，但它終於沉入了！非常感謝你的幫助！ – 2012-02-11 00:09:26

爲什麼不爲這些特定的ID設置點擊功能？

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

來源

2012-02-10 23:05:16 user965927

這樣的事情可能嗎？

<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')); 
    } 
}); 
});

來源

2012-02-10 23:06:40 scott

這裏是一個替代的解決方案：

<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(); 
    }); 
});

來源

2012-02-10 23:10:34 osahyoun

JQuery - 取決於複選框選中的開關盒

回答

相關問題