如何在我的情況下切換鏈接？

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);