Как переключить ссылку в моем случае?

Question

Я пытаюсь переключить тексты и содержание ссылок, когда пользователь нажимает на ссылку.

У меня есть что-то вроде

<a id='link' href='#'>click me</a> 
<div id='items'> 
    <h1>title here</h1> 
    <p>texts here...</p> 
</div> 

$('#link').on('click', function(e){ 
    e.preventDefault();  
    $(this).text('isClicked'); 
    $('#items').empty().html("<img src='images/image.png'/>") 
}) 

Когда пользователь нажимает на ссылку, текст ссылки станет isClicked и items HTML будет заменен с изображением. Однако, если пользователь снова нажимает, я хочу, чтобы изменения текста ссылки вернулись к click me, а items скроет изображение и снова отобразит содержимое тега title и p.

Я не уверен, как это осуществить. Может ли кто-нибудь мне помочь? Большое спасибо!

Answer 1

Вы можете добавить фиктивный класс к ссылке и работать с этим условием

//Have a dummy class added to the link and toggle it on click 
$('#link').on('click', function(e){ 
    e.preventDefault();  
    var $this = $(this), 
     $textDiv = $('#items'), 
     $imageDiv = $('#image') 
    if($this.hasClass('clicked')) { 
     // remove the class 
     $this.removeClass('clicked'); 
     // change the text 
     $this.text('click me'); 
     // Hide image 
     $imageDiv.addClass('hide');   
     // show text 
      $textDiv.removeClass('hide'); 

    } else { 
     // remove the class 
     $this.addClass('clicked'); 
     // change the text 
     $this.text('isClicked'); 
     // Show image 
     $imageDiv.removeClass('hide');   
     // Hide text 
      $textDiv.addClass('hide'); 
    } 
}); 

Check Fiddle

Вы можете также приковать методы, применяемые в том же элементе.

Answer 2

$('#link').on('click', function(e){ 
    e.preventDefault(); 
    if ($(this).text() == "isClicked") { 
     $(this).text("click me"); 
     .. etc 
    } else { 
     $(this).text('isClicked'); 
     $('#items').empty().html("<img src='images/image.png'/>") 
    } 
}); 

Как я уже сказал в своем комментарии, используйте такое состояние. Простой и эффективный.

Answer 3

Одним из способов вы можете сделать это:

$('#link') 
// Set data attribute to hold original text 
.data('primeText', $('#link').text()) 
// set click event using jQuery1.73+ 
.on('click', function(e) { 
    e.preventDefault(); // prevents going to link, not needed if you set link href to "javascript:void(0)" 
    // begin setting text, within is a inline-if statement testing current text against prime text 
    $(this).text($(this).text() == $(this).data('primeText') ? 'isClicked' : $(this).data('primeText')); 
}); 

Другой способ, если вы работали с более чем одним, как, используя имя класса вместо ID:

$('.link') 
// jQuery's .each method allows you to do things to each element in an object group 
.each(function(i) { $(this).data('primeText', $(this).text()); }) 
// again, calling click method 
.on('click', function(e) { 
    $(this).text($(this).text() == $(this).data('primeText') ? 'isClicked' : $(this).data('primeText')); 
}); 

Examples

Answer 4

Вы можете сделать это,

$('#link').on('click', function(e){ 
e.preventDefault();  
$(this).text('isClicked'); 
$('#items').children().toggle(); 
var img=$('#items img'); 
if(img.length>0){ 
    img.remove(); 
} 
else{ 
    $('#items').append("<img src='images/image.png' />"); 
    $(this).text('Click me'); 
} 


}) 

Answer 5

Что об использовании CSS подход?

Ваш HTML останется тот же:

<a id='link' href='#'>click me</a> 
<div id='items'> 
    <h1>title here</h1> 
    <p>texts here...</p> 
</div> 

Но мы можем использовать .toggleClass() здесь, чтобы сделать нашу жизнь проще

$('#link').on('click', function(e){ 
    e.preventDefault();  
    $(this).text('isClicked'); 
    $('#items').toggleClass('display-image'); 
}) 

CSS-бы выглядеть следующим образом:

#items.display-image > h1, 
#items.display-image > p, 
{ 
    visibility:hidden; 
} 
#items.display-image{ 
    background-image:url("/images/image.png"); 
} 

Таким образом, вам не нужно беспокоиться об удалении вещей, и .toggleClass обрабатывает их видимость.

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

Answer 6

Попробуйте что-то вроде этого:

HTML:

<a id='link' href='#'>click me</a> 
<div id='items'> 
    <h1 class="text-item">title here</h1> 
    <p class="text-item">texts here...</p> 
    <img src="images/images.png" alt="Image" /> 
</div> 

CSS:

img { 
    display: none; 
} 

JavaScript:

$('#link').off().on('click', function(e) { 
    e.preventDefault(); 
    if($('#items > img').is(':visible')) { 
     $(this).text('click me'); 
     $('#items > img').hide(); 
     $('#items > .text-item').show();  
    } else {  
     $(this).text('isClicked'); 
     $('#items > .text-item').hide(); 
     $('#items > img').show(); 
    } 
}); 

Fiddle

Answer 7

Вы можете попытаться сохранить значение в вар, а затем переключаться с вкл выкл в функции themselfs;

var initialState = $('#items').html(), 
functionBla(e) { 
    e.preventDefault();  
    $(this).text('isClicked'); 
    $('#items').empty().html("<img src='images/image.png'/>") 
    $('#link').off('click').on('click', functionCla); 
}, 
functionCla(e) { 
    e.preventDefault();  
    $(this).text('click'); 
    $('#items').html(initialState); 
    $('#link').off('click').on('click', functionBla); 
}; 

$('#link').on('click', functionBla);