jquery - Jquery .css 不能在函数内工作

Question

我正在玩 JQuery 中的一个小游戏，我需要更改按钮的 css。我处于测试阶段，所以目前有点杂乱无章。

无论如何，假设我点击了一个按钮。这应该使该按钮的文本变为红色。 这行得通

$(".btn-card").click(function(){
    $(this).css({"color":"red"});
});

现在假设我选择了一个随机按钮，并将其硬编码，没有特别的地方。这行得通

$(function(){
    var i = 5;
    $("#Card" + i).css({"color":"red"});
});

但是现在，假设我采用相同的基本概念，并将其复制并粘贴到一个函数中。这不起作用

function enemyTurn(){ 
    highlightCard(5); 
}
function highlightCard(i){
    $("#Card" + i).css({"color":"red"});
}

.css()在其他两个示例中有效，但在第三个示例中无效，是否有原因？

编辑 我需要能够从代码中的任何位置而不是按钮中调用该函数。单击事件

编辑 我想我知道为什么它不起作用。但我不知道如何（清楚地）解释它，所以一旦我得到解决方案，我会稍后编辑它。播放器 = 按钮点击。（好）敌人的回合是基于代码，而不是行动。所以敌人不能执行按钮点击。单击按钮将起到“刷新”的作用，这就是它起作用的原因。我需要能够在轮到敌人时“刷新”页面的状态，而不是真正刷新页面（这不会做任何事情）。我只是假设更改 css 实际上会更改 css，但从技术上讲这不是真的。

标签： jquerycssfunction

Answer 1

你确定它不起作用吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Card5" onClick="testFunc()">Click me to change text color</button>
<script>
function highlightCard(i){
    $("#Card" + i).css({"color":"red"});
}
function testFunc(){
 highlightCard(5);
}
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button id="Card5">Test Button</button>
    <script>
    function highlightCard(i){
        $("#Card" + i).css({"color":"red"});
    }
//highlight button when page loads
     highlightCard(5);

    </script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Card1">Test Button</button>
<button id="Card2">Test Button</button>
<button id="Card3">Test Button</button>
<button id="Card4">Test Button</button>
<button id="Card5">Test Button</button>
<button id="Card6">Test Button</button>
<button id="Card7">Test Button</button>
<button id="Card8">Test Button</button>
<br/>
Enter card number to select:<br/>
<input id="cardnum" type="text" onkeyup="selectcard()">
<br/>
<span id="result"></span>
<script>
var lastcardnum = null;
        function highlightCard(i){
            $("#Card" + i).css({"color":"red"});
        }
    function selectcard(){
       if(lastcardnum!=null){
        $('#Card'+lastcardnum).css({"color":"black"});
       }
      var $result = $("#result");
      var $cardnum = $("#cardnum").val();
      try{
      if($cardnum.trim().length&&!isNaN(parseInt($cardnum, 10))&&parseInt($cardnum, 10)<=8&&parseInt($cardnum, 10)>=1){
      highlightCard($cardnum);
      $result.html("Card "+$cardnum+" selected");
      lastcardnum = $cardnum;
    } else {
      $result.html("<b style='color: red;'>Card number must be a number from 1 to 8!</b>");
    }
    } catch(err){
     $result.html("<b style='color: red;'>Card number must be a number from 1 to 8!</b>");
    }
    }

 </script>