0

所以简而言之，我想做的是在特定元素的点击事件上，即（.beanHolder ul li）我想从分数（.score）中减去然后声明一个变量（clicked =“yes”）那么当用户再次单击该项目，代码的第二部分被处理。我知道冗长的方法是为每个 .bean 声明一个 var（这将是至少 40 个 var），因此代码可能会变得相当冗长。我的想法是，我可以使用“this”将变量添加到 bean，但实际上它不起作用。任何想法都会很棒！！！

我的 jQuery 代码 ->

<script>
$(document).ready(function(){
var clicked = "";
$(".beanHolder ul li").click(function(){

    if (this.clicked == "")
    {
        $(".bean", this).attr("src", "img/bean.png");
        var number = parseInt($('#score').text());
        number-=1;
        $('#score').text(number);
        this.clicked = "yes";
        return;
    }
    else if (this.clicked == "yes")
    {
        $(".bean", this).attr("src", "img/beanG.png");
        var number = parseInt($('#score').text());
        number+=1;
        $('#score').text(number);
        this.clicked = "";
        return; 
    }
}); 
});
</script>

编辑：我让它工作了；如果有人正在寻找类似的东西，这将起作用->

<script>
$(document).ready(function(){

$(".beanHolder ul li").click(function(){
    //$(this).data("clicked","no");
    var clicked = $(this).data("clicked");

    if (clicked)
    {
        $(".bean", this).attr("src", "img/beanG.png");
        var number = parseInt($('#score').text());
        number+=1;
        $('#score').text(number);
        $(this).data("clicked",false);
        //var clicked = $(this).data("clicked");
        //return;
    }
    else
    {       
//This is to keep the score from going below 0; as it is it can not go over a score of 20.
        if (parseInt($('#score').text()) > -1) 
        {
            $(".bean", this).attr("src", "img/bean.png");
            var number = parseInt($('#score').text());
            number-=1;
            $('#score').text(number);
            $(this).data("clicked",true);
            //return;
        }
    }
}); 
});
</script>
4

2 回答 2

3

您可以使用.data()将任意数据附加到 DOM 元素：

$(this).data("clicked","yes");

您可以稍后通过以下方式检索它：

var clicked = $(this).data("clicked");

所以，把它们放在一起，你可以做这样的事情：

$(".beanHolder ul li").click(function(){
    var clicked = $(this).data("clicked");
    if (clicked) {
        // this element has been clicked
        $(this).data("clicked",false);    // I'd much rather use bools than "yes"/"no"
    }
    else {
        // clicked hasn't been clicked
        $(this).data("clicked",true);    
    }
于 2013-03-29T16:57:31.947 回答
0

您可以像这样设置属性：

<script>
$(document).ready(function(){

$(".beanHolder ul li").click(function(){
    var clicked = $( this ).attr( 'clicked' );
    if (clicked == "")
    {
       ...
    }
    else if (this.clicked == "yes")
    {
      ...
    }
}); 
});
</script>
于 2013-03-29T16:58:54.503 回答