#javascript #jquery #html
#javascript #jquery #HTML
Вопрос:
Я бы ожидал, что следующий код будет переключать содержимое html .articleArrow
между стрелками вверх и вниз при .articleTitle
нажатии:
jQuery
$(".articleTitle").click(function () {
if ($(this).children('.articleArrow').html() == 'amp;#8593;')
$(this).children('.articleArrow').html('amp;#8595;');
else if ($(this).children('.articleArrow').html() == 'amp;#8595;')
$(this).children('.articleArrow').html('amp;#8593;');
});
HTML
<div class='articleTitle'>
Blah
<div class='articleArrow'>
amp;#8595;
</div>
</div>
Но это ничего не делает. С другой стороны, если я выну if...else if
out и просто установлю символ с $(this).children('.articleArrow').html('amp;#8593;');
его помощью, это сработает. Итак, установка символа работает, if...else
если он не срабатывает должным образом, и я не могу понять, почему.
Вы можете просмотреть его в прямом эфире на моем сайте здесь (не волнуйтесь, это не настоящая панель администратора!)
Комментарии:
1. Итак, вы хотите, чтобы символ стрелки переключался при нажатии? (стрелка вверх и стрелка вниз)
2. @Austin Да, я хочу, чтобы он переключался между up и down при нажатии на родительский div
3. Как только объекты HTML вставляются в DOM, объекты анализируются и больше не являются объектами, поэтому
html()
не возвращают объекты, которые вы могли бы определить, записав свои значения в консоль.
Ответ №1:
Работает для меня, если я использую символы Юникода для сравнения с:
$(".articleTitle").click(function () {
if ($(this).children('.articleArrow').html() == '↓') $(this).children('.articleArrow').html('amp;#8593;');
else if ($(this).children('.articleArrow').html() == '↑') $(this).children('.articleArrow').html('amp;#8595;');
});
Ответ №2:
Вы можете легко справиться с этим без беспорядка if statement
, просто используя .slideToggle
метод полного обратного вызова и :visible
селектор jQuery.
$(".articleTitle").click(function () {
// 1st, i go ahead and asign our arrow element to a variable for use in callback
var arrow = $(this).find('.articleArrow');
$(this).siblings('.articleContent').slideToggle("slow", function(){
// this is the `complete` callback method
// in here, we can now manipulate whatever we need to when the "toggle" is `complete`
arrow.html( $(this).is(':visible') ? 'amp;#8593;' : 'amp;#8595;' );
// inside the .html statement is a simple `inline if` statement that simply says:
// if true ? do this : else do this
});
});
Пример
Простой код:
$(".articleTitle").click(function () {
var a = $(this).find(".articleArrow");
$(this).siblings(".articleContent").slideToggle("slow", function () {
a.html($(this).is(":visible") ? "amp;#8593;" : "amp;#8595;")
})
});
Комментарии:
1. Спасибо, узнал что-то новое! Я новичок в jQuery, но, если я правильно понимаю, проверка ‘:visible’ — это просто то, что возвращает true (если оно, конечно, видно). Но я мог бы заменить это просто на «true» или что-нибудь еще, что возвращает true? Видимая проверка не служит никакой другой цели здесь, нет?
2. @Juicy видимая проверка здесь служит для определения, является ли элемент переключаемым открытым или закрытым. Если он закрыт, то он не виден. Вы могли бы заменить его чем угодно, но я не уверен, как что-то еще будет соответствовать тому, чего вы хотите достичь здесь?