jQuery-自動添加元素切換？

Question

我有這個代碼。 它適用於每個元素。 有沒有辦法使其自動化？ 因為如果要添加元素（例如job4），還需要添加jQuery代碼。

$("#jobi1").click(function() {
    $("#job1").fadeIn(300);
});
$("#jobi2").click(function() {
    $("#job2").fadeIn(300);
});
$("#jobi3").click(function() {
    $("#job3").fadeIn(300);
});

Answer 1

使用一個類並從數據屬性中獲取ID

$(".job").on("click",function() {
  $(this).data("target").fadeIn(300);
});

使用

<div class="job" data-target="job1">...</div>

Answer 2

給您的工作元素相同的類，並將工作標識符放入數據屬性中，如下所示：

<button class="job" data-id="job1">job1<button>
<button class="job" data-id="job2">job2<button>
<button class="job" data-id="job3">job3<button>

和javascript：

$('.job').on('click', function(){
    var id = $(this).data('id');
    $('#'+id).fadeIn(300);
});