如何将 select 按钮与他的 class 一起用于某些功能

Question

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

button1 添加 'yellow' class 到 Hello1

和

button2 添加 'green' class 到 hello2

我在下面的函数中尝试了一些东西，但我想 select  的 id 而不是 p:first

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

通过id使用jQuery('#p1')到select。

jquery 就绪方法的正确语法是

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

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

Answer 3

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

Answer 4

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 5

jQuery('button') 将 select 所有按钮。你想要的是 select 一个特定的按钮。由于两个按钮都有 ID，因此 select 它们的 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
});

Answer 6

您可以 select 使用提供的 jquery select 或者 p1 或 p2 $('#p1") 前缀 # 意味着你想要 select id p1 .

jQuery(document).ready(function() {
    // Your code
});

语法：

可以使用两种语法：

$(document).ready(function)

ready()方法只能在当前文档上使用，所以不需要selector:

$(function)

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

你也可以用 $ 代替 jQuery 它们是一样的。

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

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

如何将 select 按钮与他的 class 一起用于某些功能

How to select button with his class for some function

javascript

jquery-mobile