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() 在其他 2 个示例中有效，但在第 3 个示例中无效，有什么原因吗？

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

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

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>

Answer 2

您的 sn-p 对我有用，但我建议采用不同的方法 - 有一个具有 {color: red} 样式的突出显示类，然后在单击或函数调用时添加/删除该类。最好不要在 js 函数中更改 css。

下面有一些按钮带有函数调用以及一个点击事件处理程序来改变颜色。

$(".btn-card").click(function(){
  $('.btn-card').removeClass('highlight');
  $(this).addClass('highlight')
});



function highlightCard(i){
  $('.btn-card').removeClass('highlight');
  $("#Card" + i).addClass('highlight')
}

highlightCard(5);

.highlight {color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button type="button" id ="Card1" class="btn btn default btn-card">Card 1</button>
<button type="button" id ="Card2" class="btn btn default btn-card">Card 2</button>
<button type="button" id ="Card3" class="btn btn default btn-card">Card 3</button>
<button type="button" id ="Card4" class="btn btn default btn-card">Card 4</button>
<button type="button" id ="Card5" class="btn btn default btn-card">Card 5</button>
<button type="button" id ="Card6" class="btn btn default btn-card">Card 6</button>