php - 如何在 Jquery 中获取特定 li 的颜色？

Question

我的 HTML 文件有代码：

<li id="b1" onclick="myfunc(this)" class="thumbsup fa fa-thumbs-up" ></li> 

上面的代码创建了一个类似的按钮，点击时颜色会发生变化。

现在我想在表单提交时获得它的颜色，以便在 php 方面我可以相应地在 DB 中添加喜欢的数量。也就是说，如果用户单击此按钮，则它的颜色将变为 gray 。所以在 jquery 中我想看看它是否是灰色的，然后在 php 中相应地增加 DB 中的值。不知道如何在 jquery 中检索 li 元素的颜色。

请注意，用户可以多次单击按钮。就像第一次点击一样，按钮变成灰色，再次点击时。它变成它的默认颜色等等......

标签： phpjqueryhtmlajax

Answer 1

你不想要 li 的颜色，你想要它的状态。切换类：

$(function() {
  $(".thumbsup").on("click", function() {
    $(this).toggleClass('liked'); // every time we click we set or remove
    $(this).next().removeClass('disliked'); // remove from the thumbsdown
  })
  $(".thumbsdown").on("click", function() {
    $(this).toggleClass('disliked'); // every time we click we set or remve
    $(this).prev().removeClass('liked'); // remove from thumbsup
  })
  $("#save").on("click", function() {
    var liked = $(".liked").length,
        disliked = $(".disliked").length;
    
    console.log(liked,disliked);
    // ajax here - sending liked:0,disliked:0 if nothing clicked
    $.post("savelike.php",{ "liked":liked,"disliked":disliked},function() {
       console.log("saved");
    });
  })
})

.liked { background-color:green }
.disliked { background-color:red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="a1" class="thumbsup fa fa-thumbs-up"></li>
  <li id="a2" class="thumbsdown fa fa-thumbs-down"></li>
</ul>

<button id="save" type="button">Save</button>

具有多个喜欢/不喜欢集的原始更复杂的示例

$(function() {
  $(".thumbsup").on("click", function() {
    $(this).toggleClass('liked'); // every time we click we set or remove
    $(this).next().removeClass('disliked'); // remove from the thumbsdown
  })
  $(".thumbsdown").on("click", function() {
    $(this).toggleClass('disliked'); // every time we click we set or remve
    $(this).prev().removeClass('liked'); // remove from thumbsup
  })
  $("#count").on("click", function() {
    console.log($(".liked").length,"liked",
                $(".disliked").length,"disliked"); // how many

    // which ones - using http://api.jquery.com/map/
    let likes = $('.thumbsup.liked').map(function(){ // array map
      return this.id; // each ID that is liked
      }).get(); 

    let dislikes = $('.thumbsdown.disliked').map(function(){
      return this.id
      }).get();
    // here are the arrays - use .join(",") to get a list
    console.log(likes.length>0?likes:"No likes", 
             dislikes.length>0?dislikes:"No dislikes")  
  })
})

.liked { background-color:green }
.disliked { background-color:red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="a1" class="thumbsup fa fa-thumbs-up"></li>
  <li id="a2" class="thumbsdown fa fa-thumbs-down"></li>
  <li id="b1" class="thumbsup fa fa-thumbs-up"></li>
  <li id="b2" class="thumbsdown fa fa-thumbs-down"></li>
</ul>

<button id="count" type="button">Count</button>