Question

我的HTMl文件具有代码：

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

上面的代码创建了一个点赞按钮，其颜色在点击时会改变。

现在，我想在表单提交时获得其颜色，以便在php端可以在数据库中相应地添加多个赞。也就是说，如果用户单击此按钮，则它的颜色变为灰色。所以在jQuery中，我想看看它是否是灰色，然后在数据库中相应地在php中增加值。不确定如何在jquery中检索li元素的颜色。

请注意，用户可以多次单击按钮。就像第一次点击一样，按钮变为灰色，然后再次单击。它变为默认颜色，依此类推...

Answer 1

正如@mplungjan在评论中指出的那样，如果单击该颜色，则不需要颜色。您可以编写一个onlick函数，将ajax请求发送到您的php文件，在那里进行查询，然后返回，您可以编写一个非常简单的代码来着色并再次禁用该按钮的点击。

喜欢这个

myfunc(e){
 $.ajax({
  type:'POST',
  url:'yourphpfile.php',
  data:{whatever:youwanttosend},
  success:function(data){
   $('#b1').css('background-color':'green');
  });
}

Answer 2

您不想要li的颜色，而是想要它的状态。切换课程：

drone-server_1  | standard_init_linux.go:190: exec user process caused "no such file or directory"

$(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 }

Answer 3

您可以使用jQuery的查找功能。假设在div元素下有多个li，则可以尝试以下代码来获取所有颜色为灰色的li元素。

$( "div.classname" ).find( "li.thumbsup" ).css( "background-color", "grey " ).

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

3 个答案: