обновите содержимое html после нажатия на значок

после нажатия на значок Цельсия или Фаренгейта, я хочу изменить степень и значок. Что со мной происходит, что он просто обновляет его один раз.обновите содержимое html после нажатия на значок

HTML:

<ul id="list"> 
    <li></li> 
    <li>&nbsp;<i class="wi wi-celsius"></i></li> 
    <li></li> 
</ul>

JS:

$('#list li:nth-child(2)>i').click(function() { 
    var temp = $('#list li:nth-child(2)'); 
    if ($(this).hasClass('wi wi-celsius')) { 
     alert("C"); 
     var convertedTemp = parseInt(temp.text()) * 9/5 + 32; 
     temp.html(Math.round(convertedTemp) + '&nbsp;<i class="wi wi-fahrenheit"></i>'); 

    } else { 
     alert("F"); 
     var convertedTemp = (parseInt(temp.text()) - 32)/(9/5); 
     temp.html(Math.round(convertedTemp) + '&nbsp;<i class="wi wi- celsius"></i>'); 
    } 
});

источник

2017-01-05 Moaad Amer

что с дополнительным интервалом в 'temp.html (Math.round (convertedTemp) + '); 'между wi- и celsius и один для fahrenheit. – Loaf

i-element всегда имеет один и тот же класс, поэтому он также входит, если вместо него. – Blauharley

, если вы добавляете элемент i, когда кто-то нажимает, к нему не будет прикреплен обработчик событий. вам нужно использовать делегирование событий или просто изменить существующий элемент вместо создания нового – Cruiser

Поскольку вы удалить элемент со страницы. Событие не подключается к новому добавленному элементу. Поэтому вам нужно использовать делегирование событий.

$('#list li:nth-child(2)').on("click", ">i" , function() {

Другой вариант - это не заменить HTML, просто заменить текст и классы.

$('#list li:nth-child(2)>i').click(function() { 
 
    var icon = $(this).toggleClass("wi-celsius wi-fahrenheit"), 
 
     li = icon.closest("li"), 
 
     span = li.find("span"), 
 
     num = parseFloat(span.text()), 
 
     isCel = icon.hasClass('wi-celsius'), 
 
     val = isCel ? num * 9/5 + 32: (num - 32) * 5/9; 
 
    span.text(val); 
 
});

.wi-celsius::after { 
 
    cursor : pointer; 
 
    content : "°C" 
 
} 
 

 
.wi-fahrenheit::after { 
 
    cursor : pointer; 
 
    content : "°F" 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul id="list"> 
 
    <li></li> 
 
    <li><span class="num">32</span>&nbsp;<i class="wi wi-celsius"></i> 
 
    </li> 
 
    <li></li> 
 
</ul>

источник

2017-01-05 14:10:58 epascarello

Это сработало, но я все равно не понял его почему? –

@MoaadAmer Вы добавляете событие click к элементу. Вы удалите этот элемент со страницы и замените его на новый. Новый не волшебным образом получает событие, которое вы добавили к этому другому элементу. Поэтому вам нужно либо переустановить событие click для нового элемента. Или вы используете делегирование событий (добавьте событие в родительский и родительский проверки, чтобы увидеть, был ли щелчок на дочернем элементе), поэтому событие будет привязано к динамическим элементам. – epascarello

Я хотел бы использовать JQuery в тумблер класс

$('#list li:nth-child(2)>i').click(function(){ 
    var temp = $('#list li:nth-child(2) > span.num'); 
    $(this).toggleClass("wi-celsius"); 
    $(this).toggleClass("wi-fahrenheit"); 

    if($(this).hasClass("wi-celsius")){ 
    var convertedTemp = parseInt(temp.text()) * 9/5 + 32; 
    }else{ 
    var convertedTemp = (parseInt(temp.text()) -32)/ (9/5);  
    } 

    $('#list li:nth-child(2)> span.num').text(convertedTemp); 
});

Это будет просто изменить их на каждый клик.

Edit: теперь работает, добавив срок в @ epascarello отвечают

источник

2017-01-05 14:12:08 Loaf

Это не работает, потому что я все еще должен проверить, что такое класс, поэтому я могу обновить степень, а не только значок –

@MoaadAmer - ну, конечно, но я просто исправлял проблему класса. – Loaf

@MoaadAmer - Обновлен мой ответ, чтобы предоставить вам больше кода – Loaf

обновите содержимое html после нажатия на значок

ответ

Смежные вопросы