нажатие на слово, которое меняется на другое?

Question

Я хочу добиться того, чтобы щелкнуть текст на экране, а затем текст, который я нажал, изменил на другое слово.

Например:

, если нажать на ссылку 'Просмотр в виде списка' Я хочу, чтобы изменить на 'Эскизы'

Вот моя попытка ниже:

HTML код:

<div class="page-intro"> 
    <h2>Artists</h2> 
    <h2 class="thumb-to-list">View As List</h2> 
</div> 

Код css:

.page-intro { 
    background: orange; 
} 

.page-intro h2 { 
    font-weight: normal; 
    display: inline-block; 
} 

.thumb-to-list { 
    float: right; 
} 

Вот моя попытка коды, но это не работает:

$('.thumb-to-list').toggle(function() { 
    $('.thumb-to-list').text('View As Thumbnails'); 
}, function() { 
    $('.thumb-to-list').text('View As List'); 
}); 

Answer 1

Там нет необходимости использовать on() функции, потому что Ваш DOM не изменения, изменяя его значение/текст. Вы должны просто использовать функцию click().

$('.thumb-to-list').click(function() { 
    $(this).text('View As Thumbnails'); 
} 

Answer 2

Вы можете использовать непосредственно в click событии:

$(".thumb-to-list").click(function() { 
    if ($(this).text() == "View As Thumbnails") 
     $(this).text("View As List") 
    else 
     $(this).text("View As Thumbnails"); 
}); 

Answer 3

Вы должны связать свои мышь на событие

$('.thumb-to-list').on('click', function() { 
 
    if ($(this).text() == "View As List") { 
 
    $(this).html('View As Thumbnails'); 
 
    } else { 
 
    $(this).html('View As List'); 
 
    } 
 
});

.page-intro { 
 
    background: orange; 
 
} 
 
.page-intro h2 { 
 
    font-weight: normal; 
 
    display: inline-block; 
 
} 
 
.thumb-to-list { 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="page-intro"> 
 
    <h2>Artists</h2> 
 
    <h2 class="thumb-to-list">View As List</h2> 
 
</div>