如何對同名按鈕使用不同的功能？

我想爲我的按鈕使用相同的名稱，但我想單擊一個按鈕並顯示該按鈕的解決方案。例如，我點擊第一個按鈕（任務）顯示第一個解決方案（解決方案）。我想這樣做，因爲我想要很多任務 - 解決方案對。感謝您的答案。如何對同名按鈕使用不同的功能？

這裏是我的代碼：

<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'元素在另一個包裝元素中。在這種情況下，「兄弟姐妹（）」解決方案將不起作用。 – 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

如何對同名按鈕使用不同的功能？

回答

相關問題