php - 如何将html的属性获取到jquery

Question

我试图通过教程的指导实现评论的喜欢和不喜欢按钮，但我无法从我的代码中获取属性。

这是我的 html 代码，包括 php

<a id="' . $quote->quote_id . '" data-toggle="tooltip" title="'. $language->list->tooltip->like .'" class="clickable like tooltipz"><span class="glyphicon glyphicon-plus red"></span></a>&nbsp;

<span class="up_votes"><?php echo ($vote_up); ?></span>

<a id="' . $quote->quote_id . '" data-toggle="tooltip" title="'. $language->list->tooltip->dislike .'" class="clickable dislike tooltipz"><span class="glyphicon glyphicon-minus red"></span></a>&nbsp;

<span class="up_votes"><?php echo ($vote_down); ?></span>

$quote->quote_id is integers like 1,2
$language->list->tooltip->like = Like comment
$language->list->tooltip->dislike = Dislike comment
$vote_up = total likes
$vote_up = total dislikes

这是jquery部分

//####### on button click, get user like and send it to vote_process.php using jQuery $.post().
    $(".glyphicon").on('click', '.glyphicon', function (e) {

        //get class name (down_button / up_button) of clicked element
        var clicked_button = $(this).children().attr('class');

        //get unique ID from voted parent element
        var quote_id    = $(this).parent().attr("id"); 

        if(clicked_button==='glyphicon-minus') //user disliked the content
        {
            //prepare post content
            post_data = {'quote_id':quote_id, 'vote':'down'};

            //send our data to "vote_process.php" using jQuery $.post()
            $.post('processing/process_votes.php', post_data, function(data) {

                //replace vote down count text with new values
                $('#'+quote_id+' .down_votes').text(data);

                //thank user for the dislike

            }).fail(function(err) { 

            //alert user about the HTTP server error
            alert(err.statusText); 
            });
        }
        else if(clicked_button==='glyphicon-plus') //user liked the content
        {
            //prepare post content
            post_data = {'quote_id':quote_id, 'vote':'up'};

            //send our data to "vote_process.php" using jQuery $.post()
            $.post('processing/process_votes.php', post_data, function(data) {

                //replace vote up count text with new values
                $('#'+quote_id+' .up_votes').text(data);

                //thank user for liking the content
            }).fail(function(err) { 

            //alert user about the HTTP server error
            alert(err.statusText); 
            });
        }

    });
    //end 

        });

在 jquery 部分，我试图知道用户点击了哪个按钮并获取该按钮的 ID

Answer 1

.attr('class') will return all classes that are assigned to the element, which is not working as you are comparing the entire class list against a specific class (i.e 'class1 class2 class2' != 'class2').

---

.hasClass('specific-class') will return a boolean value depending on if that specific class has been assigned to the element in question.

推荐方案

您可以稍微简化一下代码，下面的代码在使用 hasClass(".glyphicon-minus") 之前将点击事件附加到类 .glyphicon 的任何内容或 hasClass(".glyphicon-plus") 来检查它是反对票还是赞成票。

从这里开始，有两种方法可以更新每个帖子的总投票数，您可以使用当前的技术(找到最接近的包装类 - 我在本例中使用了 .post)或您可以向标识属于该帖子的元素的 UI 元素添加属性 - 即 for="post1"。

我包含了第二个选项的代码，因为它更短一些，但将其注释掉了。

还有一个检查，看看新的总数是否为 0，然后停止该过程，这样您就不会得到反对票。我已将此检查注释掉，但您可以根据需要取消注释。

希望对您有所帮助，如果您还需要什么，请告诉我。

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

  vote = 0;

  // Check if negative vote
  if ($(this).hasClass("glyphicon-minus")) {
    vote = -1;
  }

  // Check if positive vote
  if ($(this).hasClass("glyphicon-plus")) {
    vote = 1;
  }


  // Update individual vote count
  newVoteTotal =  
  parseInt($(this).closest(".post").find(".votes").text()) + parseInt(vote);

  // Uncomment if statement and closing bracket if you want to stop usings from being able to give negative votes
  //if ( newVoteTotal != "-1" ) {
  $(this).closest(".post").find(".votes").text( newVoteTotal );
  //}


  // ALTERNATIVE using 'for' attributes
  // postID = $(this).attr("for");
  // newVoteTotal = parseInt($(".votes[for='" + postID + "']").text()) + parseInt(vote);
  // $(".votes[for='" + postID + "']").text(newVoteTotal)

})

.post {
  padding: 20px;
  border: 1px solid black;
}

.post-body {
  padding-bottom: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post" id="post1">
  <div class="post-body">
    Lorem ipsum post 1.
  </div>
  <button class="glyphicon glyphicon-plus" for="post1">Vote Up</button>
  <button class="glyphicon glyphicon-minus" for="post1">Vote Down</button>
  <span class="votes" for="post1">0</span>
</div>
<div class="post" id="post2">
  <div class="post-body">
    Lorem ipsum post 2.
  </div>
  <button class="glyphicon glyphicon-plus" for="post2">Vote Up</button>
  <button class="glyphicon glyphicon-minus" for="post2">Vote Down</button>
  <span class="votes" for="post2">0</span>
</div>

---

具体解决方案

我已尝试为您的代码结构创建一个特定的解决方案，我相信这会奏效。变化包括:

• $(".glyphicon").on('click', function(e) { - 更正了您创建的点击事件
• var clicked_button = $(this).attr('class') - 如果您愿意，您可以收集所有类(稍后我们将只检查是否存在一个类).attr() docs
• if (clicked_button.includes('glyphicon-minus') - 这将检查我们早期收集的完整类列表，以查看是否存在特定类(如果存在则返回 true) . .include() docs

我已经删除了发送信息服务器端的所有代码，并用 console.log() 消息替换它以证明我们已经收集了您想要的所有参数。您可以将旧代码添加回您的生产站点。

//####### on button click, get user like and send it to vote_process.php using jQuery $.post().
$(".glyphicon").on('click', function(e) {

//get class name (down_button / up_button) of clicked element
var clicked_button = $(this).attr('class');

//get unique ID from voted parent element
var quote_id = $(this).parent().attr("id");

if (clicked_button.includes('glyphicon-minus')) //user disliked the content
{
  // POST like
  console.log("Liked quote-id=" + quote_id + " (via class " + clicked_button + ")");
 
} else if (clicked_button.includes('glyphicon-plus')) //user liked the content
{
  // POST dislike
  console.log("Disliked quote-id=" + quote_id + " (via class " + clicked_button + ")");
}

});
//end 

.glyphicon {
  width: 50px;
  height: 50px;
  display: inline-block;
}

.red {
  background: red;
}

.like {
  border-bottom: 5px solid green;
}

.dislike {
  border-bottom: 5px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a id="1" data-toggle="tooltip" title="Like comment" class="clickable like tooltipz"><span class="glyphicon glyphicon-plus red"></span></a>&nbsp;

<span class="up_votes">0</span>

<a id="1" data-toggle="tooltip" title="Dislike comment" class="clickable dislike tooltipz"><span class="glyphicon glyphicon-minus red"></span></a>&nbsp;

<span class="up_votes">0</span>