代码之家 › 专栏 › 技术社区 › Charlie McShane

使jquery与id[关闭]的所有编号变量一起工作

wordpress jquery php

-1

Charlie McShane · 技术社区 · 7 年前

我正在编码某些内容,其中某些文本根据您单击的位置而显示。我写的jquery, 但是没有考虑到所有这些数据都是由一个PHP循环输出的 .有没有一种方法可以改变我写的jquery,它可以适用于无限多的li,而不仅仅是我指定的那些li?

$('#selection1').on('click', function() {
   $('.content-block').removeClass('active');
   $('.content-selector').removeClass('active');
   $('#message1').addClass('active');
   $('#selection1').addClass('active');
});

$('#selection2').on('click', function() {
   $('.content-block').removeClass('active');
   $('.content-selector').removeClass('active');
   $('#message2').addClass('active');
   $('#selection2').addClass('active');
});

$('#selection3').on('click', function() {
   $('.content-block').removeClass('active');
   $('.content-selector').removeClass('active');
   $('#message3').addClass('active');
   $('#selection3').addClass('active');
});

4 回复 | 直到 7 年前

Krzysztof Janiszewski 7 年前

记住,在jquery中,您使用CSS中的选择器,所以最简单的方法是使用

$('#selection1').on('click', function() {

为了这个

$('[id^="selection"]').on('click', function() {

它将应用于具有 id 从“选择”开始。

也在里面 click 事件使用变量 this 而不是再次引用 身份证件 .

$('[id^="selection"]').on('click', function() {
    var selection = $(this),
        number = selection.attr("id").substr(9);

    $('.content-block, .content-selector').removeClass('active');

    $('#message' + number).addClass('active');
    selection.addClass('active');
});

Roy Bogado 7 年前

如果制作按钮,可以添加数据属性(1、2或3),然后向单击的按钮添加类,如下所示:

$('.buttonClicked').on('click', function() {
   $('.content-block').removeClass('active');
   $('.content-selector').removeClass('active');
   var num = $(this).attr('data-atribute'); //Get the 1,2 or 3 number dynamically
   $('#message'+num).addClass('active');
   $('#selection'+num).addClass('active');
});

Nandita Sharma 7 年前

使用这样的函数

$('li').on('click', function() {
       var num =  $(this).attr("id").substr(6);
       console.log(num)
       $('.content-block').removeClass('active');
       $('.content-selector').removeClass('active');

       $('#message'+ num).addClass('active');
       $('#selection'+ num).addClass('active');
    });

$('li').on('click', function() {
   var num =  $(this).attr("id").substr(6);
   console.log(num)
   $('.content-block').removeClass('active');
   $('.content-selector').removeClass('active');
   
   $('#message'+ num).addClass('active');
   $('#selection'+ num).addClass('active');
});

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<ul>
  <li id="select1">
  1
  </li>
  <li id="select2">
  2
  </li>
  <li id="select3">
  3
  </li>
  <li id="select4">
  4
  </li>
</ul>

Zenoo 7 年前

如果您真的不想更改HTML,可以使用jquery ^= 选择器选择每个元素 id 从开始 "selection" .

$(document).on('click', '[id^="selection"]', function() {
  let id = +this.id.replace('selection',''); //Get the ID value here
  $('.content-block,.content-selector').removeClass('active');
  $('#message'+id).addClass('active');
  $(this).addClass('active');
});

div{
  width: 20px;
  height: 20px;
  background-color: blue;
  display: inline-block;
  margin: 5px;
}

div.active{
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selection1"></div>
<div id="selection2"></div>
<div id="selection3"></div>
<div id="selection4"></div>
<div id="selection5"></div>

<div id="message1"></div>
<div id="message2"></div>
<div id="message3"></div>
<div id="message4"></div>
<div id="message5"></div>