2013-07-23 2 views
-2

Для каждого элемента с классом = требуется, чтобы я добавил addClass недействительным после активации метода test() в onclick Link, но он не работает. Как обратиться к объекту? Theres код:JQuery .each() function

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style> 
.required {background-color:red;} 
.invalid {background-color:blue !important;} 
</style> 

<script> 
function test(){ 
$('.required').each(function(i,obj) { 
$(obj).addClass("invalid"); 
}); 
} 
</script> 

</head> 
<body> 
<form method="get"> 
<input type="text" class="required" name="var"/> 
<input type="text" class="required" name="var2"/> 
<input type="submit" value="Submit"/> 
</form> 

<a onclick="test()" href="#">Link</a> 

</body> 
<html> 
+0

@Jack Функция определена до того, как DOM готов, но не запускается до следующего. Нет проблем. – Izkata

+2

Вы должны включить jQuery для этого, чтобы он работал – Musa

+0

@Izkata. Ваше право. Я не заметил, что он звонил по нему. – Jack

ответ

2
<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style> 
.required {background-color:red;} 
.invalid {background-color:blue !important;} 
</style> 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script> 
$(document).ready(function() { 
    $("#btn").click(function() {  
     $('.required').addClass("invalid"); 
     return false; 
    }); 
}); 
</script>  
</head> 
<body> 
<form method="get"> 
<input type="text" class="required" name="var"/> 
<input type="text" class="required" name="var2"/> 
<input type="submit" value="Submit"/> 
</form> 
<a id="btn" href="#">Link</a> 
</body> 
<html> 
  • Нет необходимости для цикла.
  • Нет необходимости в вызове функции при использовании jquery.
  • Включить JQuery.
+0

не знал, что мне нужно включить jquery coz, какая-то функция работала с ним. Спасибо – Sheryf

+0

Вы комбинировали Javascript и JQuery, лучше использовать один из них, и поскольку вы используете JQuery, лучше использовать, если для всех. – randomizer

+0

Ещё один вопрос. Мне нужен цикл coz. Я хочу проверить значение каждого элемента ввода. 'function test() { $ ('. required'). each (function() { if ($ (this) .value ==" "|| $ (this) .value == null) { $ (это) .addClass ("invalid"); \t} \t else return true; }); } ' – Sheryf

9

Вы можете просто сделать это:

$('.required').addClass("invalid"); 

Нет необходимости каждый loop здесь.

+0

его примером. Я хочу использовать, если для каждого элемента и следующего стиля изменения. – Sheryf

+0

Здесь нет необходимости использовать каждый цикл. Смотрите это: [Fiddle] (http://jsfiddle.net/G484X/) или это [fidddle] (http://jsfiddle.net/G484X/1/).Пожалуйста, также включите файл jQuery в свой код, чтобы это работало. –

1

Попробуйте это:

function test() { 
    $('.required').each(function() { 
    $(this).addClass("invalid"); 
    }); 
} 
+0

Я пробовал это перед публикацией здесь. не помогает. – Sheryf

1

Поймать событие щелчка с JQuery:

$('a').on('click', function(e) { 
    e.preventDefault(); 
    $('.required').addClass("invalid"); 
}); 
3

Вы не включая JQuery на этой странице. Поместите это в заголовке:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
0

Вам не нужен каждый цикл здесь.

Я рекомендую делать это так (слушать щелчки на .required, а также добавить новый класс):

$('.required').on("click", function() 
{ 
    $(this).addClass("invalid"); 
}); 
0

Вы код отлично работает, когда вы включаете jQuery library. Так что это твоя проблема.

Я бы предложил некоторые улучшения для вашего кода.

Включите jQuery и напишите свои скрипты перед тегом </body>. Это best practice.

Вы используете jQuery, так что нет необходимости в методе onclick.

Помните, что не петля внутри петель.

Убедитесь, что вы не используете свой тег <a>, чтобы выполнить его по умолчанию.

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style> 
    .required {background-color:red;} 
    .invalid {background-color:blue !important;} 
</style> 

</head> 
<body> 
    <form method="get"> 
     <input type="text" class="required" name="var"/> 
     <input type="text" class="required" name="var2"/> 
     <input type="submit" value="Submit"/> 
    </form> 
    <a id="btn" href="#">Link</a> 

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script> 
$(function() { 

    $("#btn").click(function(e) { 
     e.preventDefault();  
     $('.required').addClass("invalid"); 
    }); 

}); 
</script> 

</body> 
<html> 
Смежные вопросы