Question

在这两个按钮中，我想做两个添加类的功能：

button1将“黄色”类添加到Hello1

和

button2将“green”类添加到hello2

我在下面的函数中尝试了一些内容，但我想选择而不是p:first

的ID

jQuery(document).ready(function addClass() {
jQuery('button').click(
    function() {
        jQuery('p:first').addClass('intro');
    });
});

.yellow,
.intro {
  font-size: 150%;
  color: yellow;
}
.green {
  font-size: 150%;
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p1">Hello1</p>
<p id="p2">hello2</p>
<p id="p3">hello3</p>

<button id="b1">Button1</button>
<button id="b2">Button2</button>

最后一个问题：为什么第一个功能起作用，第二个功能不起作用！

第一：

jQuery(document).ready(function addClass() {
    jQuery('button').click(function() {
        jQuery('p:first').addClass('intro');
    });
});

第二

jQuery(document).ready( //without function
    jQuery('button').click(function() {
            jQuery('p:first').addClass('intro');
        );
    });

Answer 1

1）使用jQuery('#p1')代替jQuery('p:first')

2）你不能写这样的东西

  jQuery(document).ready( //without function
                        jQuery('button').click(

这是一个错误的语法

完整的工作代码应该是：

jQuery(document).ready(function addClass() {
  jQuery('#b1').click(function() {
    jQuery('#p1').addClass('yellow');
  });
  jQuery('#b2').click(function() {
    jQuery('#p2').addClass('green');
  });
});

.yellow {
  font-size: 150%;
  color: yellow;
}
.green {
  font-size: 150%;
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="p1">Hello1</p>
<p id="p2">hello2</p>
<p id="p3">hello3</p>

<button id="b1">Button1</button>
<button id="b2">Button2</button>

Answer 2

您可以使用提供的jquery选择器选择p1或p2 #前缀jQuery(document).ready(function() { // Your code });表示您要选择 ID p1。

$(document).ready(function)

语法：

可以使用两种语法：

$(function)

ready（）方法只能在当前文档中使用，因此不需要选择器：

{"error":"Not Found","status":404,"message":"Channel 'd4newhatever2017' does not exist"}

函数是必需的，它指定在加载文档后运行的函数。

你也可以使用$代替jQuery，它们是相同的。

它必须有一个函数，或者您可以传递一个命名函数，请参阅文档以获取更多https://learn.jquery.com/using-jquery-core/document-ready/

http://www.w3schools.com/jquery/default.asp

Answer 3

使用jQuery('#p1')按ID进行选择。

jquery ready方法的正确语法是

$( document ).ready(function() {
    console.log( "ready!" );
});

https://learn.jquery.com/using-jquery-core/document-ready/

Answer 4

使用id选择器jQuery("#p1")。此外，不确定预期的行为......但无论您点击哪个按钮，它都将适用于它的编码方式。你也可以在那里使用id选择器！

Answer 5

function function_name(){
// code for function decleration
}

只是声明一个函数，以便以后可以使用它。例如，如果你不得不做多次。要使用功能，你必须将其称为

function_name();

在你的第一个例子中（你的上一个问题），你只需要声明函数。为了更好地理解你可以尝试添加

<button id="test">call function</button>

到您的HTML和

$('#test').click(function(){
   addClass();
});

在$(document).ready里面玩耍。也强烈建议阅读有关JS和jquery的更多内容。 W3学校将成为你开始的好地方。

Answer 6

jQuery('button')将选择所有按钮。你想要的是选择一个特定的按钮。由于两个按钮都有ID，因此请按照以下ID进行选择：

jQuery('#b1').click(function(){
    // logic for the the button that has the ID b1
});

jQuery('#b2').click(function(){
    // logic for the the button that has the ID b2
});

如何选择带有类的按钮来实现某些功能

6 个答案: