Question

我创建了一个函数来根据用户输入更改<section>元素的类，使某些部分可见，而其他部分则不可见。我想根据用户输入更改<span>元素中<section>元素内的文本。我使用类来定义哪个文本应该替换为<span>。

问题是我似乎无法按类选择跨度。我可以使用$('span')或$('#id')但不能使用$('.class')。

我的JSfiddle：http://jsfiddle.net/cap_tain/UpN7J/

更改<span>的当前代码：

function ReplaceRC() {
$("span").each(function () {
    if ($(this).attr('class') === 'RC') {
         $(this).html(playerRace + " " + playerClass);
    }
}); 
};

我也尝试过更简单的方法：

$('.RC').html(playerRace + " " + playerClass);

Answer 1

你不仅有一些导致问题的“智能引号”，而且你正在重新发明许多内置的jQuery功能：

$("span").each(function () {
    if ($(this).attr('class') === 'RC') {
         $(this).html(playerRace + " " + playerClass);
    }//end if
    else {
        $(this).html("SWAPPED TEXT");
    }//end 
});

在这里，您循环遍历每个span标记以查看它是否具有给定的类...这相当于：

$("span.RC").html(playerRace + " " + playerClass);
$("span:not(.RC)").html("SWAPPED TEXT");

此外，您可以在DOM中存储所需的信息，而不是使用case语句来匹配值：

<button class="RaceClass" type="button" data-race="Gnome" data-class="Mechanic">Gnome Mechanist</button>

然后使用.data("race")或.data("class")检索它。我也会避免使用全局变量来传递信息。你最好使用replaceRC参数：

function ReplaceRC(playerRace, playerClass, newText) {
    $("span.RC").html(playerRace + " " + playerClass);
    $("span.js-customMsg1").html(newText);
};

然后致电：

ReplaceRC($(this).data("race"), $(this).data("class"), "SWAPPED TEXT");

您可以使用.hide()和.show()代替添加/删除hidden类，但这取决于您是否正在使用该类进行其他操作。

Full JSFiddle Demo

Answer 2

您的标记中看起来“RC”周围的引号类型错误。您是否注意到Fiddler如何突出显示它们？

<span class=”RC” id="CR">

Answer 3

我不确定这个想法是否属于class属性的字面意思是“RC”，或者 span 标签是否意味着有“RC”类，但你可能会尝试做< / p>

$(this).hasClass('RC')

代替。

Answer 4

Eugene Xa是对的。你有错误的引号。

而不是switch ($(':button').attr('value')) {，你必须写switch ($(this).attr('value')) {。

否则它总是一个侏儒。

Answer 5

您的小提琴中的代码存在一些问题，但您可以按类选择范围。这是一个简单的例子：

<强> HTML

<span class="first">first |</span>
<span class="second">second |</span>
<span class="third">third |</span>

<button id="myButton">Hide</button>

<强>脚本

$('#myButton').click(function () {
    $('.second').hide(); //<-- this selects the span and hides it
});

fiddle

我注意到你的循环中未定义playerRace和playerClass。您应该放入一些console.log()语句，以便更好地了解代码的每一步中发生的事情，以帮助调试。

JQuery无法按类</span>选择<span>

5 个答案: