jQuery

Question

我有这个代码。它适用于每个元素。有没有办法让它自动化？因为如果我想添加元素（例如 job4）我还需要添加 jQuery 代码。

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

Answer 1

使用 class 并从数据属性中获取 ID

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

使用

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

Answer 2

为您的工作元素提供相同的 class 并将工作标识符放在 data-attribute 中，如下所示：

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

jQuery - 自动添加元素切换？

jQuery - auto add toggle on element?

javascript

toggle