如何使執行事件的功能單擊jQuery

Question

我想知道以什么方式可以對我的代碼實現一個函數，所以我不必每次都重復它。

我的代碼：

 $(document).ready(function() { //alert('test'); $("#txt1").css('display', 'none'); $("#txt2").css('display', 'none'); $("#titu1").click(function(ev){ $("#txt1").slideToggle('slow'); }); $("#titu2").click(function(ev){ $("#txt2").slideToggle('slow'); }); }); 

 body { font-family: 'Montserrat', sans-serif; } .txtTituCaracteristica {color:#be1521;} .arrowBlack {color: #000;} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <br /> <div id="titu1" class="txtTituCaracteristica"> <strong>Living</strong> <span class="arrowBlack"><i class="fas fa-angle-down"></i></span> </div> <div id="txt1" class="txtEachCaracteristica">LoremLoremLoremLoremLoremLoremLoremLoremLorem</div> <br> <div id="titu2" class="txtTituCaracteristica"><strong>Stand</strong> <span class="arrowBlack"><i class="fas fa-angle-down"></i></span></div> <div id="txt2" class="txtEachCaracteristica">LoremLoremLoremLoremLoremLoremLoremLoremLoremLorem</div> 

我的問題是，如果我有50或1000個切換文本，則必須分別執行50和1000個單獨的函數。

我不想重復太多代碼

Answer 1

使用類和next功能

 $(document).ready(function() { //alert('test'); $(".txtEachCaracteristica").css('display', 'none'); $(".txtTituCaracteristica").click(function(ev) { $(this).next(".txtEachCaracteristica").slideToggle('slow'); }); }); 

 body { font-family: 'Montserrat', sans-serif; } .txtTituCaracteristica { color: #be1521; } .arrowBlack { color: #000; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <br /> <div class="txtTituCaracteristica"> <strong>Living</strong> <span class="arrowBlack"><i class="fas fa-angle-down"></i></span> </div> <div class="txtEachCaracteristica">LoremLoremLoremLoremLoremLoremLoremLoremLorem</div> <br> <div class="txtTituCaracteristica"><strong>Stand</strong> <span class="arrowBlack"><i class="fas fa-angle-down"></i></span></div> <div class="txtEachCaracteristica">LoremLoremLoremLoremLoremLoremLoremLoremLoremLorem</div> 

Answer 2

您可以使用類而不是ID

$(".txt").click(function(ev){
    $(this).slideToggle('slow');//here this will slide the currently clicked class
});


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<br />

<div  class=" txt txtTituCaracteristica">
  <strong>Living</strong> <span class="arrowBlack"><i class="fas fa-angle-down"></i></span>
</div>
<div class="txt" class="txtEachCaracteristica">LoremLoremLoremLoremLoremLoremLoremLoremLorem</div>
<br>

<div class="txt xtTituCaracteristica"><strong>Stand</strong> <span class="arrowBlack"><i class="fas fa-angle-down"></i></span></div>
<div class="txt txtEachCaracteristica">LoremLoremLoremLoremLoremLoremLoremLoremLoremLorem 
</div>

Answer 3

Use another class for all the top level divs(titu1, titu2, ....)
Ans see the modification of your code below - 

HTML:
<div id="titu1" class="menuToggle txtTituCaracteristica">
  <strong>Living</strong> <span class="arrowBlack"><i class="fas fa-angle-down"></i></span>
  <div id="txt1" class="txtEachCaracteristica">LoremLoremLoremLoremLoremLoremLoremLoremLorem</div>
</div>

<br>

<div id="titu2" class="menuToggle txtTituCaracteristica"><strong>Stand</strong> <span class="arrowBlack"><i class="fas fa-angle-down"></i></span>
<div id="txt2" class="txtEachCaracteristica">LoremLoremLoremLoremLoremLoremLoremLoremLoremLorem</div>
</div>

CSS:
body {

  font-family: 'Montserrat', sans-serif;
}
.txtTituCaracteristica {color:#be1521;}
.arrowBlack {color: #000;}

JS:
$(document).ready(function() {
  //alert('test');
    $("#txt1").css('display', 'none');
    $("#txt2").css('display', 'none');

    $(".menuToggle").click(function(ev){
      $(this).children('div').slideToggle('slow');

    });   

});

See Demo: [JSFiddle][1]

Answer 4

不，您不必一遍又一遍地重復自己，只需要使用已經觸發該類的所有元素上的事件的類即可：

 $(document).ready(function() { //alert('test'); $(".txtEachCaracteristica").css('display', 'none'); $(".txtTituCaracteristica").click(function(ev){ let id = ev.target.id.substring(ev.target.id.length-1); $("#txt"+id).slideToggle('slow'); }); }); 

 body { font-family: 'Montserrat', sans-serif; } .txtTituCaracteristica {color:#be1521;} .arrowBlack {color: #000;} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <br /> <div id="titu1" class="txtTituCaracteristica"> <strong>Living</strong> <span class="arrowBlack"><i class="fas fa-angle-down"></i></span> </div> <div id="txt1" class="txtEachCaracteristica">LoremLoremLoremLoremLoremLoremLoremLoremLorem</div> <br> <div id="titu2" class="txtTituCaracteristica"><strong>Stand</strong> <span class="arrowBlack"><i class="fas fa-angle-down"></i></span></div> <div id="txt2" class="txtEachCaracteristica">LoremLoremLoremLoremLoremLoremLoremLoremLoremLorem</div> 

Answer 5

您可以使用CSS [attribute^=value]選擇器。 然后對所有具有以"titu"開頭的id屬性值的元素設置click事件：

 $(document).ready(function() { //alert('test'); $( 'div[id^="txt"]' ).css( 'display', 'none' ); $( 'div[id^="titu"]' ).click( function () { $( this ).next( 'div' ).slideToggle( 'slow' ); }); }); 

 body { font-family: 'Montserrat', sans-serif; } .txtTituCaracteristica {color:#be1521;} .arrowBlack {color: #000;} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <br /> <div id="titu1" class="txtTituCaracteristica"> <strong>Living</strong> <span class="arrowBlack"><i class="fas fa-angle-down"></i></span> </div> <div id="txt1" class="txtEachCaracteristica">LoremLoremLoremLoremLoremLoremLoremLoremLorem</div> <br> <div id="titu2" class="txtTituCaracteristica"><strong>Stand</strong> <span class="arrowBlack"><i class="fas fa-angle-down"></i></span></div> <div id="txt2" class="txtEachCaracteristica">LoremLoremLoremLoremLoremLoremLoremLoremLoremLorem</div>