Question

我有一个jQuery函数，可以在单击图像时交换图像。这很好用，但是，我还想使用$ .get传递一个参数，具体取决于显示的图像。

这是上下文。我有一堆评论和旁边的“竖起大拇指”图像。单击竖起大拇指时，它会变为绿色并通过$ .get方法调用PHP脚本。这是有效的，但我也希望用户能够“不竖起大拇指”，这样如果他们点击一个已经是绿色的，那么可以删除他们的投票。这是我到目前为止所拥有的。

我的jQuery：

<script>

$(document).ready(function() {  

$('.thumb a').on('click', function(e) {

    e.preventDefault();
    var $img = $(this).find('img');

    var $idshow = $(this).attr("id");

    $img.attr('src', function(_,s) {
         return s.indexOf('thumbs_up_green') > -1 ? '../images/thumbs_up.png'
                                                  : '../images/thumbs_up_green.png'                                                                               
    });

    //HERE IS THE VARIABLE I WANT TO BE ABLE TO CHANGE
    var $action = "add";        

    $.get("thumb_up_tip.php?tip_id=" + $idshow + "&action=" + $action)      
});

});
</script>

在上面的代码中，如果按钮从“thumbs_up.png”变为“thumbs_up_green.png”，我希望var $ action为“add”。如果它从“thumbs_up_green.png”变为“thumbs_up.png”，那么我希望var $ action为“减去”。

任何建议都会很棒！

Answer 1

添加或取消添加类时，添加一个类。然后在您的点击检查中查看存在哪个类，然后根据该决定您的操作。

<script>
  $(document).ready(function() {  
    $('.thumb a').on('click', function(e) {
      e.preventDefault();
      var $img = $(this).find('img'),
          $idshow = $(this).attr("id"),
          $action = 'add';

      if($img.hasClass('thumbsUp')){
         $action = "remove";
         $img.removeClass('thumbsUp');
      }else{
        $img.addClass('thumbsUp');
      }

     $img.attr('src', function(_,s) { return s.indexOf('thumbs_up_green') > -1 ? '../images/thumbs_up.png' : '../images/thumbs_up_green.png'});
     $.get("thumb_up_tip.php?tip_id=" + $idshow + "&action=" + $action)      
   });
   });
</script>

它将检查元素上是否存在类，如果是，那么这已经竖起大拇指，所以我们应该删除，反之亦然。

根据通过jQuery交换的图像来更改var值

1 个答案: