リンクをクリックしたときにjQueryのslideToggleにCSSを適用しようとしています

Question

jQueryのslideToggleを使用して表示/非表示を試みる一連のリストを表示し、後に表示/非表示を行うハイパーリンクに別のCSSスタイルを適用する必要がありますクリックされた後、再びクリックされると元のスタイルに戻ります。リソースとしてこの例を見て：

$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText); 

は以下を使用してみました、それが働いた：以下のスニペットでhttp://papermashup.com/jquery-show-hide-plugin/

、そこにある以下の

$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText).css({ backgroundColor: '#399C05' }) : toggleClick.text(options.showText).css({ backgroundColor: '#FFFFFF' }); 

しかし、私は変更する必要がありますこのような背景色の代わりにCSSの背景画像：

$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText).css({ background: url(/images/icon_image1.gif) }) : toggleClick.text(options.showText).css({ url(/images/icon_image1.gif) }); 

ただし、これは「Microsoft JScriptランタイムエラー：オブジェクトはこのプロパティまたはメソッドをサポートしていません」を示し、表示/非表示が機能しなくなります。

はまたしてクリック上のクラスを切り替えてみました：show_hideCloseは基本的に以下のスニペットでshow_hideの複製である

$('#toggleDiv').toggleClass('show_hideClose', $(this).is(':visible')); 

、これは上記と同じエラーが発生しました。

だから私は持っている：

$('.show_hide').showHide({ 
    speed: 1000, // speed you want the toggle to happen  
    easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI 
    changeText: 1, // if you dont want the button text to change, set this to 0 
    showText: 'View Available Programs', // the button text to show when a div is closed 
    hideText: 'Hide Program Listing' // the button text to show when a div is open 
}); 

と

(function ($) { 
    $.fn.showHide = function (options) { 

     //default vars for the plugin 
     var defaults = { 
      speed: 1000, 
     easing: '', 
     changeText: 0, 
     showText: 'Show', 
     hideText: 'Hide' 

     }; 
     var options = $.extend(defaults, options); 

     $(this).click(function() { 

      $('.toggleDiv').slideUp(options.speed, options.easing); 
      // this var stores which button you've clicked 
      var toggleClick = $(this); 
      // this reads the rel attribute of the button to determine which div id to toggle 
      var toggleDiv = $(this).attr('rel'); 
      // here we toggle show/hide the correct div at the right speed and using which easing effect 
      $(toggleDiv).slideToggle(options.speed, options.easing, function() { 
       // this only fires once the animation is completed 
       if(options.changeText==1) { 
        $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText); 
        //$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText).css({ backgroundColor: '#399C05' }) : toggleClick.text(options.showText).css({ backgroundColor: '#FFFFFF' });  //<-This works with background colors but not with background url 
       } 
      }); 

      return false;  
     }); 
    }; 
})(jQuery); 

をハイパーリンクは、.NET、C＃のリピーターの内側で、リピーターが含まれています

<asp:Repeater ID="rptMyContentGroups" runat="server" OnItemDataBound="rptMyContentGroups_OnItemDataBound"> 
    <ItemTemplate>    
    <a href="#" id="blah" class="show_hide" rel='#            <%=rptmyContent.ClientID%>_programList_<%# GetDivClass() %>'>View</a> 
     <div id="programList" runat="server" style="display: none;"> 
     <asp:Repeater ID="rptMyContent" runat="server" OnItemDataBound="rptMyContent_OnItemDataBound"> 
      <HeaderTemplate>  
       <ul> 
      </HeaderTemplate> 
      <ItemTemplate> 
       <li> 
        <asp:HyperLink ID="hypContentDetail" runat="server" /> 
       </li> 
      </ItemTemplate> 
      <FooterTemplate> 
       </ul>  
      </FooterTemplate> 
     </asp:Repeater> 
     </div> 
    </ItemTemplate> 
</asp:Repeater> 

UPDATE：

試してみてください：

$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText).css('background-image', 'url("' + /images/icon_a.gif + '")') : toggleClick.text(options.showText).css('background-image', 'url("' + /images/icon_b.gif + '")'); 

IEは私には分かりません。 Visual Studioから "Microsoft JScriptランタイムエラー：オブジェクトがこのプロパティまたはメソッドをサポートしていません"というメッセージが表示されます。

Answer 1

これは、通常、背景画像のCSSプロパティを変更するための適切な構文は次のとおりです。

$(toggleDiv).is(":visible") 
    ? toggleClick 
     .text(options.hideText) 
     .css('background-image', 'url(/images/icon_image1.gif)') 
    : ... 

しかし、私は強く、あなたのプラグインにオプションを追加し、addClass/removeClassを使用することをお勧め。これにより、コード内の画像のURLをハードコーディングせずに、プラグインをよりカスタマイズすることができます。

// pass the option 
$('.show_hide').showHide({ 
    ... 
    showText: 'View Available Programs', 
    hideText: 'Hide Program Listing', 
    hideClass: 'myClassForHide' 
}); 

// use it in your toggle 
$(toggleDiv).is(":visible") 
    ? toggleClick 
     .text(options.hideText) 
     .addClass(options.hideClass) 
    : toggleClick 
     .text(options.hideText) 
     .removeClass(options.hideClass) 

Answer 2

Ok ...ここでは違いがあります。これはうまくいくようです：

$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText).css('background-image', 'url(/images/image1.gif)') : toggleClick.text(options.showText).css('background-image', 'url(/images/image2.gif)'); 

私はそれを先に試していないために自分自身をキックします。