English 中文(简体)
换文时
原标题:Changing the text when toggle
  • 时间:2012-04-26 15:09:34
  •  标签:
  • jquery

当用户点击但似乎不奏效时,我试图改变案文。

http://jsfiddle.net/3jt3P/1/“rel=“nofollow” http://jsfiddle.net/3jt3P/1/。

<a href="#" class="slide" onclick="firstclick();">Show First</a> ... 
<a href="#" class="slide1" onclick="secondclick();">Show Second</a>

<div id="one" class="content">one</div>
<div id="second" class="content">two</div>


<script type="text/javascript">

        function firstclick() { 
            $( #second ).hide();
            $( #one ).slideToggle(400, function () {
                debugger
                if ($(this).is(":visible")) {
                    $( .slide > a ).text( Hide First );
                    $( .slide1 > a ).text( Second );
                }
                else {
                    $( .slide > a ).text( First );
                } 
            });
            return false;

        } 
        function secondclick() { 
            $( #one ).hide();
            $( #second ).slideToggle(400, function () {

                if ($(this).is(":visible")) {
                    $( slide1 > a ).text( Hide Second );
                    $( slide > a ).text( First );
                }
                else
                    $( slide1 > a ).text( First );

            });
            return false;
        } 

        $(document).ready(function () {
            // Hide the "view" div.
            $( #one ).hide();
            $( #second ).hide();

        });
    </script>
最佳回答

我将稍作改动;标明你与<代码>data-*属性的联系,仅使用一个活动手来控制显示/显示相关内容的内容。

::

<a href="#" class="slide" data-content="#one" data-text="first">Show first</a>
<a href="#" class="slide" data-content="#second" data-text="second">Show second</a>

<div id="one" class="content">one</div>
<div id="second" class="content">two</div>

通知添加2个属性:

  • data-content contains the id of the associated content
  • data-text contains the suffix used in the link.

我也改变了这两者之间的联系,以便有相同的类别——这可能是任何事情,但允许我把这些联系作为目标,以便我能够附上同样的行为:

$( .slide ).on("click",function(){
    var $link = $(this);
   var contentid = $link.data( content );
    $( .slide ).not($link)
               .filter(function(){ return $(this).data( contentvisible );})
               .trigger( click );
    $(contentid).slideToggle(400,function(){
        if($(this).is( :visible )){
            $link.data( contentvisible ,true).text( Hide   + $link.data( text ));
        }
        else{
           $link.data( contentvisible ,false).text( Show   + $link.data( text ));                
        }
    });
});
$( #one ).hide();
$( #second ).hide();

Live example: http://jsfiddle.net/htn3S/1/

<>Edit:Ive Update the above to include the行踪,在显示这些内容之前隐藏其他可见元素。

问题回答

页: 1

try this (btw this is a update from Jamiec s jsfiddle fix)
http://jsfiddle.net/eWExr/6/





相关问题
getGridParam is not a function

The HTML: <a href="javascript:void(0)" id="m1">Get Selected id s</a> The Function: jQuery("#m1").click( function() { var s; s = jQuery("#list4").getGridParam( selarrrow )...

selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

jQuery cycle page with links

I am using the cycle plugin with pager functionality like this : $j( #homebox ) .cycle({ fx: fade , speed: fast , timeout: 9000, pager: #home-thumbs , ...

jquery ui dialog opens only once

I have a button that opens a dialog when clicked. The dialog displays a div that was hidden After I close the dialog by clicking the X icon, the dialog can t be opened again.

jConfirm with this existing code

I need help to use jConfirm with this existing code (php & Jquery & jAlert). function logout() { if (confirm("Do you really want to logout?")) window.location.href = "logout.php"; } ...

Wrap text after particular symbol with jQuery

What I m trying to do, is wrap text into div inside ll tag. It wouldn t be a problem, but I need to wrap text that appears particularly after "-" (minus) including "minus" itself. This is my html: &...

热门标签