Question

有没有一种方法可以将多个类放在一个代码中？

我有很多“ .dwlnd-trg”类。类似于“ .dwlnd-trg2”，“。dwlnd-trg3”，“。dwlnd-trg4”和“ .dwlnd”，“。dwlnd2”，“。dwlnd3”，“。dwlnd4”等。

只有“ .s-dwlnd”保持不变，因为这是显示动画SVG图像的类。

此刻，我已经将一个有效的代码复制并粘贴到了网站的头部，这很好，但是如果不是4、6或很快的8，而不是一个漂亮的代码，它会更干净吗？ :)我尝试但没有成功...

这是到目前为止的代码：

$( document ).ready(function() {
$( ".dwlnd-trg" ).click(function() {
    $( ".dwlnd" ).addClass( "s-dwlnd" );

    setTimeout(function() {
        $(".dwlnd").removeClass("s-dwlnd");
    }, 3000); // Delay of 3 seconds
});});

$( document ).ready(function() {
$( ".dwlnd-trg2" ).click(function() {
    $( ".dwlnd2" ).addClass( "s-dwlnd" );

    setTimeout(function() {
        $(".dwlnd2").removeClass("s-dwlnd");
    }, 3000); // Delay of 3 seconds
});});

$( document ).ready(function() {
$( ".dwlnd-trg3" ).click(function() {
    $( ".dwlnd3" ).addClass( "s-dwlnd" );

    setTimeout(function() {
        $(".dwlnd3").removeClass("s-dwlnd");
    }, 3000); // Delay of 3 seconds
});});

$( document ).ready(function() {
$( ".dwlnd-trg4" ).click(function() {
    $( ".dwlnd4" ).addClass( "s-dwlnd" );

    setTimeout(function() {
        $(".dwlnd4").removeClass("s-dwlnd");
    }, 3000); // Delay of 3 seconds
});});

Answer 1

要设置多个班级，您可以尝试：

  $( ".dwlnd-trg, .dwlnd-trg2, .dwlnd-trg2" )

祝你好运！

Answer 2

我认为这是一种更清洁的解决方案。

除了您的函数变得简洁，易于理解和维护，而且您无需更新它以添加新项目这一事实之外，在标记方面，它还将类（作为样式锚）的含义与它的含义分开了。用作该功能的选择器。

我不知道您的上下文，但是，如果您也不需要目标div的其他类，则还可以使用属性来设置正确的目标。

$( document ).ready(function() {
  
  
  $(".dwlnd-trg").click(function() {
    // save the target reference via ref attribute
    var intref = $( this ).attr( 'ref' );
    
    // pass the target reference to get the right one
    $( ".dwlnd"+intref ).addClass( "s-dwlnd" );

    setTimeout(function() {
        $( ".dwlnd"+intref ).removeClass("s-dwlnd");
    }, 3000); // Delay of 3 seconds
    
    
  });
  
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <style>
    .s-dwlnd { border: solid 1px #ccc; color:red;}
  </style> 
  <!--use ref attribute as a target reference -->
  <div class="dwlnd-trg" ref="1">click me! (1)</div>
  <div class="dwlnd-trg" ref="2">click me! (2)</div>
  <div class="dwlnd1">animate me! 1</div>
  <div class="dwlnd2">animate me! 2</div>

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

</body>
</html>

Answer 3

您可以使用如下选择器：

$('[class^="dwlnd-trg"]') //Select every element that has a class attribute starting with "dwlnd-trg".

或

$('[class˜="dwlnd-trg"]') //Select every element that has a class attribute containing "dwlnd-trg".

但是要注意性能问题（因为从类中选择是一种更快的方法）

Answer 4

您可以使用attribute starts with selector：

$( '[class^="dwlnd-trg"]' ).click(function() {
    var n = this.className.match(/\d+$/)[0] // grab the number
    $( ".dwlnd" + n ).addClass( "s-dwlnd" );
    setTimeout(function() {
        $( ".dwlnd" + n ).removeClass("s-dwlnd");
    }, 3000); // Delay of 3 seconds
});

Answer 5

首先，您只需要一个$（document）.ready。只需将所有代码放在一个块中即可。

第二，您可以创建一个将选择器的类作为参数的函数。

示例：

$( document ).ready(function() {
// Put all handlers here

   $( ".dwlnd-trg4" ).click(function() {
      addclass(dwlnd4);
    });
   $( ".dwlnd-trg3" ).click(function() {
      addclass(dwlnd3);
    });    
});

function addClass(class){
    ("." + class ).addClass( "s-dwlnd" );

    setTimeout(function() {
        $("." + class).removeClass("s-dwlnd");
    }, 3000); // Delay of 3 seconds

}

但是，如果您真的想最好地发挥作用，我建议为html添加一个日期属性。并使用e.target，这样您就可以知道已单击了哪个元素。但是也许这个重构对您来说太大了。如果您有兴趣，我可以添加一个示例。

Answer 6

如果您可以基于ID进行操作，那么它将变得更加容易，因为您不能拥有多个ID。但是您可以有多个类。这是一个具有ID的示例。

$(document).ready(function() {
  $("#dwlnd-trg, #dwlnd-trg2, #dwlnd-trg3, #dwlnd-trg11, #dwlnd-trghahaha").click(function() {
    //get the id of the trigger element that is clicked
    var thisId = $(this).attr("id");
    //get everything after "dwlnd-trg" form the id.
    var idStripped = thisId.replace('dwlnd-trg','');
    
    //Use the found id addition in the selector
    $(".dwlnd" + idStripped).addClass("s-dwlnd");

    setTimeout(function() {
      $(".dwlnd" + idStripped).removeClass("s-dwlnd");
    }, 3000); // Delay of 3 seconds
  });
});

.s-dwlnd {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="dwlnd-trg">dwlnd-trg</button>
<button id="dwlnd-trg2">dwlnd-trg2</button>
<button id="dwlnd-trg3">dwlnd-trg3</button>
<button id="dwlnd-trg11">dwlnd-trg11</button>
<button id="dwlnd-trghahaha">dwlnd-trghahaha</button>

<div class="dwlnd">dwlnd</div>
<div class="dwlnd2">dwlnd2</div>
<div class="dwlnd3">dwlnd3</div>
<div class="dwlnd11">dwlnd11</div>
<div class="dwlndhahaha">dwlndhahaha</div>

用JavaScript代码安排多个类

6 个答案: