Examples

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

$('#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 2

你可以采取一种方式：

$('#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 3

您可以向链接添加虚拟类并使用该条件

//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 4

使用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 5

尝试这样的事情：

<强> 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 6

您可以尝试将值存储在var中，然后在函数本身中切换为on;

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

Answer 7

你可以这样做，

$('#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');
 }


})

如何在我的情况下切换链接？

7 个答案:

Examples