Как заменить элементы внутри div на клик с помощью запроса?

Question

Как заменить элементы внутри div на клик с помощью запроса?

0

У меня есть два отдельных класса div, называемых demo-heart и demo-coal. Функциональность, которую я пытаюсь включить: когда пользователь нажимает на значок fa-heart, он превращается в fa-coal. Когда пользователь нажимает на fa-уголь, он превращается в фа-сердце.

<div class = "demo-heart">
    <a href = "#" onclick="myFunction()">
        <i class="fa fa-heart fa-3x"></i>
    </a>
</div>

<div class = "demo-coal">
    <a href = "#" onclick="myFunction()">
        <i class="fa fa-coal fa-3x"></i>
    </a>
</div>

Это то, что я до сих пор знаю, и это, похоже, не работает. Но я также хочу, чтобы он мог вернуться к исходному фа-сердцу, когда пользователь нажимает на него. Какие-либо предложения?

<script>
    function myFunction(){
        $(".demo-heart").html("<a href = '#'><i class='fa fa-coal fa-3x'></i></a>");
    }
 </script>

sharataka 11 нояб. 2013, в 16:48

Источник

0

Вместо того, чтобы заменять содержимое (каждого) элемента div , просто переключите класс элемента and i .
Felix Kling 11 нояб. 2013, в 15:43

Теги:

javascript

jquery

2 ответа

1

Более простое решение состоит в том, чтобы иметь одну структуру HTML и переключать класс внутри нее:

<div class="demo-heart">
    <a href="#">
        <i class="fa fa-heart fa-3x"></i>
    </a>
</div>

$('.demo-heart a').click(function(e) {
    e.preventDefault();
    $('i', this).toggleClass('fa-heart fa-coal');
});

Обратите внимание, что я удалил атрибут onClick в пользу более чистого обработчика событий jQuery.

Rory McCrossan 11 нояб. 2013, в 13:57

Ещё вопросы

Вместо того, чтобы заменять содержимое (каждого) элемента div , просто переключите класс элемента and i .

Arun P Johny · Accepted Answer · 2013-11-11T13-59-00.000Z

Удалите встроенный обработчик onclick, затем используйте jQuery .click(), чтобы зарегистрировать обработчик кликов

jQuery(function(){
    $('.fa').click(function(){
        $(this).toggleClass('fa-heart fa-coal')
    })
})

Демо: скрипка