2014-12-03 56 views
1

我需要什麼按鈕文本切換不工作

  • 當點擊查看詳情=>顯示數據。
  • 當數據顯示,然後顯示隱藏詳細信息。

HTML代碼

<a href="javascript:void(0);" id="viewdetail" class="btn-primary" style="position:relative;left:20px;" 
       onclick=" 
       $(this).find('.speakers').toggle(function() { 
        $(this).text('Hide Details'); 
         }, function() { 
        $(this).text('view details'); 
         });">view details 


       <div class="speakers dis-non"> 

       </div> 
       </a> 

錯誤

 JQMIGRATE: jQuery.fn.toggle(handler, handler...) is deprecated 
+0

參考的jQuery的有兩個處理程序回調'toggle'方法已在1.8和1.9中刪除的文件! http://api.jquery.com/toggle-event/ – 2014-12-03 13:41:19

+0

這不是一個有效的HTML嵌套一個「一」元素內部有一個「格」元素。結帳我的答案是一個有效的例子(包括小提琴)。 – 2014-12-03 13:54:47

回答

-1

然後,你可以通過使用jQuery.textfunction超載和三元運營商做一個正常的方式。

$('#viewdetail').click(function() { 
    $(this).find('.speakers').text(function(_, txt) { 
     return !txt.indexOf("Hide") ? 'Show Details' : 'Hide Details'; 
    }); 
}); 
+0

!txt.indexOf(「隱藏」)將永遠是真實的,因爲的indexOf返回-1,如果「隱藏」是不存在的......不假。 – 2014-12-03 13:56:43

+0

@Renen檢查你的事實。 !是不是操作員,它完美的作品 – 2014-12-03 14:00:55

1

您必須刪除.toggle()和使用.text()

$('#viewdetail').click(function() { 
 
    var div_text = $(this).find('.speakers').text(); 
 
    if (div_text == 'Hide Details') { 
 
    $(this).find('.speakers').text('view details'); 
 
    } else { 
 
    $(this).find('.speakers').text('Hide Details'); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<a href="javascript:void(0);" id="viewdetail" class="btn-primary" style="position:relative;left:20px;"> 
 
    <div class="speakers dis-non">view details</div> 
 
</a>

0

檢查FIDDLE

HTML

<a href="javascript:void(0);" id="viewdetail" class="btn-primary">view details</a> 
<div class="speakers"></div> 

JS

var button = $('#viewdetail'); 
var content = $('.speakers'); 
button.click(function(){ 
    var isOpen = content.hasClass('on'); 
    if(isOpen){ 
     button.html('Show Details'); 
     content.removeClass('on'); 
    }else { 
     button.html('Hide Details'); 
     content.addClass('on'); 
    } 
}); 

CSS

#viewdetail {} 
.speakers {height:20px;background-color:red;transitions:all 500ms;} 
.speakers.on {height:100px;}