Question

我正在使用jQuery来获取DIV标签的ID，然后向DIV添加一些CSS样式因此，
我是jQuery的新手，我不确定这是否是一个很好的方法：

JavaScript的：

$(".myClass").click(function(e){
    var whatid = $(this).attr('id');
    var whichDiv = "divName"+whatid;
    ("$(\"#"+whichDiv+"\")").addClass();
    }

HTML：

<div id="myTest1" class="myClass">
  Helloworld I am new to JQuery 1
</div>
<div id="myTest2" class="myClass">
  Helloworld I am new to JQuery 2
</div>

请告知。

如果我以这种方式更改代码怎么办：

JavaScript的：

$(".myClass").click(function(e){
    var whatid = $(this).attr('id');
    var whichDiv = "divName"+whatid;
    ("$(\"#"+whichDiv+"\")").addClass();
    }

HTML：

<div id="1" class="myClass">CLick here 1</div>
<div id="2" class="myClass">CLick here 2</div>

<div id="myTest1">
  Helloworld I am new to JQuery 1
</div>
<div id="myTest2">
  Helloworld I am new to JQuery 2
</div>

Answer 1

this已经代表用户点击的div。您不需要使用jQuery重新选择它，因为您已经有了它的引用。

只需将课程添加到其中：

$(this).addClass('someClass');

对于你的例子：

$(".myClass").click(function(e) {
    // dont need to pull the id attribute
    // dont need to select the element again by id
    $(this).addClass('someClass');
});

如果您需要按id选择某个元素并且id碰巧是变量，那么这个语法无效：

("$(\"#"+whichDiv+"\")").addClass();

在这里，您正在创建一个字符串，然后尝试在字符串上调用addClass方法，该方法不存在。在没有任何参数的情况下调用addClass也没用，因为你想传入类名来添加到元素中。

$("#" + whatid).addClass('someClass');

Answer 2

以下是完整的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Click Me</title>
    <style>
        .foo { 
            color:#F00;
            font-size:40px;
        }
    </style>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">

        $(function () {

            $('.myclass').click(function () {
                alert('you clicked this: ' + this.id);
                $(this).addClass('foo');
            });

        });

    </script>
</head>
<body>
    <div id="mytest1" class="myclass">
        helloworld i am new to jquery 1
    </div>
    <div id="mytest2" class="myclass">
        helloworld i am new to jquery 2
    </div>
</body>
</html>

Answer 3

如果选择器字面上是"divName"的连接加上您单击的元素的ID，请尝试以下操作：

$(".myClass").click(function(e){
    $("#divName" + this.id).addClass('someClassName');
}

<强>更新

要匹配您提供的HTML，请执行以下操作，但请注意，它可能无效，因为启动带有数字的ID 无效。

$(".myClass").click(function(e){
    $("#myTest" + this.id).addClass('someClassName');
}

相反，您应该通过以字母开头来使ID有效，并调整配对元素ID以匹配更改。

获取DIV标记的ID，然后相应地向DIV添加一些CSS样式

3 个答案: