jqueryのポストドームリンクを表示/非表示にするには別のリンクを追加する必要があります

Question

jqueryの表示/非表示エフェクトの定義リストと、開いた「閉じる」に変更する「readmore」ボタンがあります。私は今、各説明のために画面の上部にアンカーを参照する別のボタンを配置する必要があります。新しいリンクを追加するためにスクリプトを編集しようとすると、「ページの先頭に戻る」ボタンが別の「閉じる」ボタンになります。私はこのスクリプトを編集して十分なJSに精通していないので、奇妙な結果を出さずに必要な作業を行うことができます。どんな助けもありがとうございます。

SCRIPT 
    $(function(){ 
    var slideHeight = 36; 

    $('.jswrap').each(function(){ 
     var defHeight = $(this).height(); 

     if(defHeight >= slideHeight){ 
      $(this).css({'height':slideHeight,'max-height': defHeight}); 
      $(this).after($('<div class="jsreadmore"><a href="#">Read More</a></div>')); 
     } 
    }); 

    $('.jsreadmore a').click(function(){ 
     var $targetSlide = $(this).parent().prev(), 
      curHeight = $targetSlide.height(), 
      defHeight = $targetSlide.css('max-height'); 

     if(curHeight == slideHeight){ 
      $targetSlide.animate({ 
       height: defHeight 
      }, "normal"); 
      $targetSlide.next().children('a').html('Close');  
     }else{ 
      $targetSlide.animate({ 
       height: slideHeight 
      }, "normal"); 
      $targetSlide.next().children('a').html('Read More'); 
     } 
     return false; 
    }); 

}); 

HTML

<div class="jscontainer"> 
      <h4><a id="onedefinition">Definition Text</a></h4> 
      <div class="jswrap"> 
       <p>content</p> 
      <p>morecontent</p> 
      </div></div> 

CSS

.content_sub1 .jscontainer {margin:0 auto;} 
.content_sub1 .jscontainer h2 {font-size:20px;color:#0087f1;} 
.content_sub1 .jswrap {position:relative; padding:10px; overflow:hidden;} 
.content_sub1 .jsgradient {width:100%;height:35px; position:absolute; bottom:0; left:0;} 
.content_sub1 .jsreadmore {padding:5px; color:#333; text-align:right;} 
.content_sub1 .jsreadmore a {padding-right:22px; font-weight:bold; font-size:12px; text-transform: uppercase; color:#c44; font-family:arial, sans-serif;} 
.content_sub1 .jsreadmore a:hover {color:#000;} 

LINK

Answer 1

www.doctorhtiller.com/procedures.htmlあなたはすべてのアンカーを操作しているためですあなたのeleこれでメンター：

$targetSlide.next().children('a').html('Read More'); 

と

$targetSlide.next().children('a').html('Close'); 

children('a')コードする「のはnext()要素の直接の子であるすべてのアンカーに影響を与えてみましょう」と言います。あなたの「ページのトップに戻る」アンカーは単なる別のアンカーなので、HTMLはそれぞれ「Read More」または「Close」になっています。あなたがする必要があるのは、スクリプトによって作成されたアンカーとアンカーを区別することです。元のアンカーにクラスを追加することで、簡単にこれを行うことができます。

<a href="#">を追加するのではなく、スパイスを加える必要があります。変更：

$(this).after($('<div class="jsreadmore"><a href="#">Read More</a></div>')); 

$(this).after($('<div class="jsreadmore"><a href="#" class="read_more_link">Read More</a></div>')); 

には、今ではその特定のアンカー要素を参照するためにはるかに簡単です。クラスをセレクタコードに追加するだけです：

$targetSlide.next().children('a.read_more_link').html('Read More'); 
$targetSlide.next().children('a.read_more_link').html('Close');