Question

我是jQuery的新手并编写一个脚本来根据是否选择了它所在的元素来更改某个元素的颜色。我的第一个问题是我无法编辑html结构，结构的形成方式给我带来了一些问题。基本上这是结构：

<div class="item">
    <div class="teamNames">
        <span>Team 01</span>
        <span>Team 02</span>
    </div>
    <div class="teamBlocks">
        <div class="block 01">
            <div>Home</div>
            <div>0.65</div>
        </div>
        <div class="block 02">
            <div>Home</div>
            <div>0.65</div>
        </div>
    </div>
</div>

团队名称绝对位于块上，因此块的内容看起来像“Team Name Home 0.65”。选择块时，其类成为：

class="block 01 sel"

我可以使用CSS轻松更改“Home”和“0.65”文本的颜色，但更改团队名称（Team 01 / Team 02）证明要复杂得多，我想知道它是否可能使用或javascript或jQuery执行此操作？值得注意的是，团队名称将永远不会相同，因此根据内容进行选择是不可能的

Answer 1

要更改特定团队，您需要为其指定唯一标识符，例如：

<div class="teamNames">
    <span id="item1">Team 01</span>
    <span id="item2">Team 02</span>
</div>

不可以更改使用jQuery选择特定的span元素。例如，您想要更改Team 01：

$("#item1").text("New Team Name");

希望这是你想要做的。

Answer 2

您是否需要通过选定的块找到团队元素？如果是，您可以使用$ .index函数获取所选团队的索引：

var currentBlock = $('.sel');
var indexOfCurrentBlock = $('.block').index(currentBlock);
if (indexOfCurrentBlock != -1) {
    var currentTeamName = $('.teamNames span').eq(indexOfCurrentBlock);
    currentTeamName.text('aaaa');
}

http://jsfiddle.net/JRFv6/

Answer 3

如果我的问题是正确的，你可以用这样的jquery来改变名字：

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

<script>
    $(document).ready(function () {
        $(".teamNames span:first").html("hello world");
    });
</script>

Answer 4

这是否正在寻找class =“block 01 sel”（如果已选中）

$(".block").click(function(){
    $(".block").removeClass("sel");
    $(this).addClass("sel");
});

DEMO

Answer 5

在没有更改html的情况下更改没有id的元素的方法

<!DOCTYPE HTML>
<html>
    <head> 
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    </head>
    <body>
        <div class="item">
            <div class="teamNames">
                <span>Team 01</span>
                <span>Team 02</span>
            </div>
            <div class="teamBlocks">
                <div class="block 01">
                    <div>Home</div>
                    <div>0.65</div>
                </div>
                <div class="block 02">
                    <div>Home</div>
                    <div>0.65</div>
                </div>
            </div>
        </div>
        <script>
            $(".teamNames span:eq(0)").html("New-Team-Name<br>");
            $(".teamNames span:eq(1)").text("---- New Team Name");
        </script>
    </body>
</html>

使用jQuery选择不相关的元素

5 个答案:

DEMO