Question

我有按钮图标 this ..在点击事件中我想将其更改为 this ..现在我正在将此代码应用于jquery

<script>
   $('div[id^="module-tab-"]').click(function(){
        $(this).next('.hi').slideToggle();
   });
</sript>

在jquery中将左光标箭头改为右光标箭头应该改变什么？请帮我提供代码

Answer 1

您可以使用toggleClass在两张图片之间切换。将每个图片分配到class，并使用toggleClass在课程之间切换，这将更改click上的图片。

<强> Live Demo

$('div[id^="module-tab-"]').click(function(){
     $(this).next('.hi').toggleClass("left-image right-image");
});

Answer 2

here正在解决您的问题

我创建一个更改背景图像的活动类。切换活动课程满足您的要求

这是你的css

.tab {
  background: url('http://i.stack.imgur.com/dzs9m.png') no-repeat;
  padding-left:50px;
}

.tab.active {
    background: url('http://i.stack.imgur.com/euD9p.png') no-repeat;
 }

.hi {
  display:none
}

这是你的JS

(function(){

  $('div[id^="module-tab-"]').click(function(){
      $(this).toggleClass("active").next('.hi').slideToggle();
  });

}());

Answer 3

嘿@Jeetendra Chauhan thanx但仍然得不到我想要的..这里是html的花药代码..

<div id="tab-module-row" style="display:none;">
    div class="module-row module-tab module-details pull-right">
      <b>Details:</b>
                                    <span class="grey-line"></span>                                                                             
          <div id="module-tab-details" class="hello-sugg">

                                        <img src="images/icons/icon-orangeboxarrow-right.png" class="right"> Some error is here                                <span class="pull-right">
                                            <img src="images/icons/icon-chat.png" data-toggle="modal" data-target="#commentBox">&nbsp;&nbsp;
                                             <img src="images/icons/icon-alert.png">                                                 </span>
                                    </div>

                        <div class="hi" id="hi1" style="width: 95%;display:none;">
                                         <span class="grey-line"></span>    
                                <b>Suggested steps:</b><br>

                                <ol>
                                    <li>Step one to resolve the issue. Try this one first!</li>
                                    <li>Second Step to resolve the issue. Try this one first!</li>
                                </ol><br>
                                <img src="images/icons/icon-charcoalarrow.png"> <a href="" data-toggle="modal" data-target="#commentBox">Add Comments</a><br>
                                <img src="images/icons/icon-charcoalarrow.png"> <a href="" data-toggle="modal" data-target="#fetchData">Update / Test Data</a><br>&nbsp;<br>
                            </div>    
                                    <span class="grey-line"></span>   </div>
                            </div>

如何使用jquery单击更改箭头图标按钮

3 个答案: