如何使一个执行事件的函数单击jquery

时间：2018-06-05 13:54:56

标签： javascript jquery

我想知道以什么方式可以为我的代码实现一个函数，所以我不必每时都重复它。

我的代码：

$(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个单独的函数来做同样的事情。

我希望不要重复这么多代码

5 个答案:

答案 0 :(得分：3)

使用类和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>

答案 1 :(得分：1)

您可以使用类而不是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>

答案 2 :(得分：1)

url('/users')

答案 3 :(得分：0)

不，你不必一遍又一遍地重复自己，只需使用你已经拥有的类来触发该类所有元素的事件：

$(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>

答案 4 :(得分：0)

您可以使用CSS [attribute^=value]选择器。并为id属性值以"titu"开头的所有元素设置点击事件：

$(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>

相关问题
最新问题