0

私はプログラミングが初めてで、いくつかのjquery/javascriptコードを簡素化しようとしていますが、あまり成功していません. ここにあるソリューションを適応させようとしました: jQuery Simplify

...しかし、やはり成功しません。

これが私のjqueryコードです：

<script>
$(document).ready(function(){

$("#hide01").click(function(){
$(".content01").hide();
});

$("#show01").click(function(){
$("p").hide();
$(".content01").show();
});

$("#hide02").click(function(){
$(".content02").hide();
});

$("#show02").click(function(){
$("p").hide();
$(".content02").show();
});

});
</script>

そしてHTML：

<button id="hide01">Hide</button>
<button id="show01">Show</button>

<button id="hide02">Hide</button>
<button id="show02">Show</button>

<p class="content01">Content 01</p>

<p class="content02">Content 02</p>

このソリューションは機能していますが、40個のボタン/コンテンツブロックが必要です...

誰でも助けることができますか？ありがとう！

4

2 に答える 2

7

HTML を次のように変更します。

<button class="btn_hide" data-id="01">Hide</button>
<button class="btn_show" data-id="01">Show</button>

<button class="btn_hide" data-id="02">Hide</button>
<button class="btn_show" data-id="02">Show</button>

<p id="content01">Content 01</p>
<p id="content02">Content 02</p>

次に、jQuery は次のようになります。

$(".btn_hide").click(function() {
    $("#content"+this.getAttribute("data-id")).hide();
});
$(".btn_show").click(function() {
    $("p").hide();
    $("#content"+this.getAttribute("data-id")).show();
});
于 2013-03-20T16:11:54.747 に答える
2

jQuery を使用すると、セレクター IE をスタックできます。

 $("#hide01, #show01").click(function(){
    $(".content01").hide();
 });

しかし、個人的には、ID を使用するのではなく、クラスを使用します。

  <button id="hide01" class="hide">Hide</button>
  <button id="show01" class="show">Show</button>
  <button id="hide02" class="hide">Hide</button>
  <button id="show02" class="show">Show</button>
  <button id="hide03" class="hide">Hide</button>
  <button id="show04" class="show">Show</button>

JS

 $(".hide").click(function(){
    $(".content01").hide();
 });
 //Etc Etc..
于 2013-03-20T16:11:37.657 に答える