Question

所以我想设置我的index.php，这样当点击like按钮时，ajax用于转到likes_button.php，并将按钮的外观改为“喜欢”。对于一个按钮，这适用于第一个按钮。它不适用于页面上的所有其他按钮。喜欢第一个按钮以外的另一个按钮，使其看起来好像是第一个按钮。所以我的问题是，我如何将这个ajax代码应用于“所有”＆＃39; index.php上的类似按钮？

这是index.php：

<!doctype html>
<head>

<?php
    include('header.php');
?>

<script>
$(document).ready(function(){
    $(".button").click(function(){
         $.ajax({url:"liked_button.php",success:function(result){
             $("#like_system").html(result);
            }});
        });
    });
</script>

</head>
<link type="text/css" rel="stylesheet" href="index.css">
<body>

<?php

$conn = mysqli_connect("localhost","root","") or die ("No SQLI");
    mysqli_select_db($conn, "sample") or die ("No DB");

$sqli = "SELECT * FROM `photos` ORDER BY `id` DESC";

$result = mysqli_query($conn, $sqli) or die ("No query");

while($row = mysqli_fetch_assoc($result))    

{
$username = $row['username'];
$title = $row['title'];
$description = $row['description'];
$image_name = $row['image_name'];
$image_id = $row['image_id'];
$random_directory = $row['random_direc'];
$date = date('Y-m-d');

$image_info = "http://localhost/splindr_2.0/photos/$random_directory/$image_id";

echo "<div id=contentWrapper'>
          <div id='photo'>
              <div id='actual_image'>
                 <img src='$image_info'>
              </div>          
              <div id='like_system'><button type='button' class='button'  name='button'>Like</button></div>     
                    <div id='info_wrapper'>
                       <div id='info_header'>Title: $title &nbsp By: $username &nbsp  Date: $date</div>
                           <div id='description'>$description</div>
                    </div>
          </div>
      </div>";//end contentWrapper

}

?> 

</body>
</html>

这是likes_button.php：

<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="liked_button.css">
</head>
<body>

<button type="button" id="button_pressed">Liked</button>

</body>
</html>

Answer 1

以下是基本想法：

$(document).ready(function(){
    $(".button").click(function(){
         var t=$(this);
         $.ajax({url:"liked_button.php",success:function(result){
             t.replaceWith("<button type='button' id='button_pressed'>Liked</button>")
         }});
    });
});

你的另一个问题是你过分使用id。将id的所有循环使用（包括我提供给您的代码）替换为class，否则您的代码将无效。

Answer 2

HTML ID（例如您的like_system）必须是唯一的。您的更新选择器每次都会找到第一个。

尝试类似：

$(".button").click(function(){
  var clicked = $(this);

  $.ajax({url:"liked_button.php",success:function(result){
    clicked.closest('div').html(result);
  }});
});

要么删除like_system ID，要么将其替换为类，如果需要设置样式等等。

Ajax只影响1个按钮，而不是所有按钮

2 个答案: