同じ名前のボタンに別の機能を使用するにはどうすればいいですか？

ボタンに同じ名前を使用したいが、ボタンをクリックしてボタンのソリューションを表示したい。たとえば、最初のボタン（タスク）をクリックすると、最初のソリューション（ソリューション）が表示されます。私は多くのタスクとソリューションのペアが必要なので、私はしたいと思います。答えをありがとう。ここで同じ名前のボタンに別の機能を使用するにはどうすればいいですか？

私のコードです：

<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
</head> 
<body> 
    <div class="task"> 
     <button>Task</button> 
     <div class="solution">Solution</div> 
    </div> 
    <div class="task"> 
     <button>Task2</button> 
     <div class="solution">Solution2</div> 
    </div> 
</body> 

<script> 

    $(document).ready(function() { 
     $("button").click(function() { 
      $(".solution").slideToggle("slow"); 
     }); 

    }); 
</script>

出典

2016-08-01 Trencsik Márkó

あなたは親要素に横断し、その中に.solutionを見つけることができます。

$(document).ready(function() { 
 
    $("button").click(function() { 
 
    $(this).parent().find('.solution').slideToggle("slow"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="task"> 
 
     <button>Task</button> 
 
     <div class="solution">Solution</div> 
 
    </div> 
 
    <div class="task"> 
 
     <button>Task2</button> 
 
     <div class="solution">Solution2</div> 
 
    </div>

出典

2016-08-01 19:05:42 Dekel

これは動作しますが、どのような '兄弟を（達成するだけで、より複雑な方法である）' – TheThirdMan

あなたが、しかし、このコード正しいん** '.solution'要素が別のラッパー要素の中にあっても**動作します。そのような場合、 'siblings（）'の解決策は動作しません。 – Dekel

使用jQueryの.siblings機能：

あなたが特定のボタンを参照する必要が

$(document).ready(function() { 
 
    $("button").click(function() { 
 
    $(this).siblings(".solution").slideToggle("slow"); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="task"> 
 
    <button>Task</button> 
 
    <div class="solution">Solution</div> 
 
</div> 
 
<div class="task"> 
 
    <button>Task2</button> 
 
    <div class="solution">Solution2</div> 
 
</div>

出典

2016-08-01 19:06:08

は$(this)でクリック：

$('button').click(function() { 
    $(this).siblings('.solution').slideToggle("slow"); 
});

をこれは、しかし、あなたがすべき、ボタン・ソリューション・ペアの任意の数に適用できる普遍的なルールを作成します。このクラスの組み合わせがウェブサイトの他の場所に表示されないようにしてください。おそらくスコープを特定の親クラスに限定するのが最も簡単です。

出典

2016-08-01 19:06:14 TheThirdMan

あなたはjQuery nextを使用することがあります。

$(function() { 
 
    $("button").click(function() { 
 
    $(this).next().slideToggle("slow"); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<div class="task"> 
 
    <button>Task</button> 
 
    <div class="solution">Solution</div> 
 
</div> 
 
<div class="task"> 
 
    <button>Task2</button> 
 
    <div class="solution">Solution2</div> 
 
</div>

出典

2016-08-01 19:10:04 gaetanoM

同じ名前のボタンに別の機能を使用するにはどうすればいいですか？

答えて

関連する問題