Question

我有一个在document.ready（）中调用的函数，用于创建跨度。

function configureContentSelector() {
  for (j=0; j<centerContent.length; j++)
    {
        var content = "<span class='contentSelector' onclick='changeContent(" + j + ")' id='span'" + j + ">" + j  + "</span>";
        $("#contentSelectorArea").html($("#contentSelectorArea").html() + content); 

   }

请注意，跨度标识为span0，span1等。

在触发与spans无关的事件时调用的单独函数中，我想操作span类（addClass（）removeClass（））

$("#" + "span" + i).removeClass("contentSelector");
$("#" + "span" + i).addClass("contentSelectorSelected");

然而，这不起作用。我相信这个问题与跨度是动态创建的事实有关，但我不知道如何解决这个问题。

提前感谢您的帮助。

Answer 1

您创建了错误的id s（所有这些都有id = span）：

var content = "<span class='contentSelector' onclick='changeContent(" + j + ")' id='span'" + j + ">" + j  + "</span>";

试试这个：

var content = "<span class='contentSelector' onclick='changeContent(" + j + ")' id='span" + j + "'>" + j  + "</span>";

BTW你的报价应该颠倒：

var content = '<span class="contentSelector" onclick="changeContent(' + j + ')" id="span' + j + '">' + j  + '</span>';

Answer 2

我认为这里有一个错误

id='span'" + j + ">"

更改为

id='span" + j + "'>"

并使用

$("#contentSelectorArea").append(content);

Answer 3

我会删除ID并使用data-*属性（无论如何，你的ID声明会出现语法错误）。

var content = "<span class='contentSelector' onclick='changeContent(" + j + ")' data-spanid='" + j + "'>" + j  + "</span>";

然后您可以使用data-*属性进行选择：

$("span[data-spanid='" + i + "']");

Answer 4

在创建控件时出现一个简单错误。检查已创建的id属性中的引号。

使用它，它可以正常工作。

var content = "<span class='contentSelector' onclick='changeContent(" + j + ")' id='span" + j + "'>" + j  + "</span>";

如何在动态创建的DOM元素上使用addClass / removeClass

4 个答案: