Question

我想改变类似的类和关于具有相同id的所有输入的数字（在span标签中），单击具有相同ID的任何输入。我找不到办法实现这一点，请帮助。

div class="something">
<input type="button" id="favorite_15" class="low"/>(<span id="favoriteX_15" >5</span>)
</div>
div class="something">
<input type="button" id="favorite_16" class="medium"/>(<span id="favoriteX_16" >2</span>)
</div>
div class="something">
<input type="button" id="favorite_17" class="low"/>(<span id="favoriteX_17" >11</span>)
</div>
div class="something">
<input type="button" id="favorite_15" class="low"/>(<span id="favoriteX_15" >5</span>)
</div>
div class="something">
<input type="button" id="favorite_18" class="medium"/>(<span id="favoriteX_18" >9</span>)
</div>
div class="something">
<input type="button" id="favorite_18" class="medium"/>(<span id="favoriteX_18" >9</span>)
</div>


$(document).ready(function(){
    $(".low").click(function(){
        var reference = this;
        var id = this.id;  
        var split_id = id.split("_");
        var text = split_id[0];
        var postid = split_id[1];  
        $.ajax({
            url: 'total.php',    
            type: 'post',
            data: {postid:postid},
            dataType: 'json',
            success: function(data){
                var favoriteX = data;
                $("#favoriteX_"+postid).text(favoriteX);       
                $(reference).removeClass("low"); 
                $(reference).addClass("high"); 
            }
        });
    });
});

已经为exaple输入了div（id =“favorite_15”）

当我先点击;第一次改变的数量和类别应该如此但是第二个的类别或数量都没有改变

当我点击第二个;第一次更改的次数，但第二次更改不会更改，第二次更改但第一次更改不会：）

使用total.php，我更新db中的'number'值，并获取当前值。提前致谢

Answer 1

只需替换：

    $(".low").click(function(){

带

  $('body').on('click', '.low', function(){

并尝试

Answer 2

ID应该始终是唯一的。让你的ID上课并检查结果。

我所做的更改是：

1）删除重复的ID并添加为类名 <input type="button" class="low favorite_15" />

2） var id = this.classList[1]; ，我从classList的值中获取了 favorite_15 的值。

3）我在 ID

中从CLASS更改为<span class="favoriteX_17">11</span>

$(document).ready(function(){
    $(".low").click(function(){
        var reference = this;
        var id = this.classList[1];  
        var split_id = id.split("_");
        var text = split_id[0];
        var postid = split_id[1];  
        $.ajax({
            url: 'total.php',    
            type: 'post',
            data: {postid:postid},
            dataType: 'json',
            success: function(data){
                var favoriteX = data;
                $(".favoriteX_"+postid).text(favoriteX);       
                $(reference).removeClass("low"); 
                $(reference).addClass("high"); 
            }
        });
    });
});

<!DOCTYPE html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    

  </head>

  <body>
    <div class="something">
      <input type="button" class="low favorite_15" />
(      <span class="favoriteX_15">5</span>
)
    </div>
    <div class="something">
      <input type="button" class="medium favorite_16" />
(      <span class="favoriteX_16">2</span>
)
    </div>
    <div class="something">
      <input type="button" class="low favorite_17" />
(      <span class="favoriteX_17">11</span>
)
    </div>
    <div class="something">
      <input type="button" class="low favorite_15" />
(      <span class="favoriteX_15">5</span>
)
    </div>
    <div class="something">
      <input type="button" class="medium favorite_18" />
(      <span class="favoriteX_18">9</span>
)
    </div>
    <div class="something">
      <input type="button" class="medium favorite_18" />
(      <span class="favoriteX_18">9</span>
)
    </div>
  </body>

</html>

更改具有相同ID的输入类

2 个答案: