Как кнопка со своим классом выбрать для некоторой функции

Question

В этих двух кнопок, я хочу сделать две функции для добавления класса:

button1 добавить «желтый» класса к <p id="p1">Hello1</p>

и

button2 добавить «зеленый» класс <p id="p2">hello2</p>

Я пытался что-то в функции сильфона, но я хочу, чтобы выбрать идентификатор <p> вместо 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

Использование jQuery('#p1') для выбора по идентификатору.

Правильный синтаксис для Jquery готового метода является

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

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

Answer 3

Используйте селектор идентификатор 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') выберет все кнопки. Вы хотите выбрать конкретную кнопку. Поскольку обе кнопки имеют идентификаторы, пометьте их идентификаторы, как это:

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

Вы можете выбрать p1 или p2, используя предоставленные JQuery селекторы $('#p1") префикс # означает, что вы хотите, чтобы выбрать ID p1.

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

Синтаксис:

Два синтаксисы могут быть использованы:

$(document).ready(function) 

Готовый() метод может быть использован только на текущем документе, так что не требуется селектор:

$(function) 

, it Указывает функцию для запуска после загрузки документа.

вы также можете использовать $ вместо jQuery, они одинаковы.

Он должен иметь функцию или вы можете передать по имени функции можно найти в документации для получения дополнительной https://learn.jquery.com/using-jquery-core/document-ready/

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