Jquery 是否更改幻灯片切换上的图像(加号或减号)?

Jquery 是否更改幻灯片切换上的图像(加号或减号)?,jquery,html,toggle,slidetoggle,Jquery,Html,Toggle,Slidetoggle,这是我的html代码: 在上面的代码中,我想在切换效果生效时添加一个图像(“例如加号或减号图像”) <table id="main_table"> <thead> <tr class="firstline"> <th>Column1</th> <th>Column2</th> <th>Column3<

这是我的html代码:

在上面的代码中,我想在切换效果生效时添加一个图像(“例如加号或减号图像”)

<table id="main_table">
    <thead>
        <tr class="firstline">
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th>Column4</th>
        </tr>
    </thead>
    <tbody>
        <tr style="width:1002px; background-color:green; color:white">
            <td  colspan="" class="flip"> Section 1 </td>
             <td  colspan="" class="flip"> Section 1 </td>
             <td  colspan="" class="flip"> Section 1 </td>
             <td  colspan="" class="flip"> Section 1 </td>
        </tr>
    </tbody>
    <tbody class="section">
        <tr>
            <td>item 111</td>
            <td>item 112</td>
            <td>item 113</td>
            <td>item 114</td>





        </tr>
        <tr>
            <td>item 121</td>
            <td>item 122</td>
            <td>item 123</td>
            <td>item 124</td>
        </tr>
        <tr>
            <td>item 131</td>
            <td>item 132</td>
            <td>item 133</td>
            <td>item 134</td>
        </tr>
    </tbody>
    <tbody>
        <tr style="background-color:green; color:white">
            <td  colspan="" class="flip"> Section 2 </td>
             <td  colspan="" class="flip"> Section 2 </td>
             <td  colspan="" class="flip"> Section 2 </td>             <td  colspan="" class="flip"> Section 2 </td>
        </tr>
    </tbody>
    <tbody class="section">
        <tr>
            <td>item 211</td>
            <td>item 212</td>
            <td>item 213</td>
            <td>item 214</td>
        </tr>
        <tr>
            <td>item 221</td>
            <td>item 222</td>
            <td>item 223</td>
            <td>item 224</td>
        </tr>
        <tr>
            <td>item 231</td>
            <td>item 232</td>
            <td>item 233</td>
            <td>item 234</td>
        </tr>
    </tbody>
    <tbody>
        <tr style="background-color:green; color:white">
             <td  colspan="" class="flip"> Section 3 </td>
             <td  colspan="" class="flip"> Section 3 </td>
             <td  colspan="" class="flip"> Section 3 </td>
             <td  colspan="" class="flip"> Section 3 </td>
        </tr>
    </tbody>
    <tbody class="section">
        <tr>
            <td>item 311</td>
            <td>item 312</td>
            <td>item 313</td>
            <td>item 314</td>
        </tr>
        <tr>
            <td>item 321</td>
            <td>item 322</td>
            <td>item 323</td>
            <td>item 324</td>
        </tr>
        <tr>
            <td>item 331</td>
            <td>item 332</td>
            <td>item 333</td>
            <td>item 334</td>
        </tr>
    </tbody>
</table>

专栏1
专栏2
第3栏
专栏4
第一节
第一节
第一节
第一节
项目111
项目112
项目113
项目114
项目121
项目122
项目123
项目124
项目131
项目132
项目133
项目134
第二节
第二节
第2节第2节
项目211
项目212
项目213
项目214
项目221
项目222
项目223
项目224
项目231
项目232
项目233
项目234
第三节
第三节
第三节
第三节
项目311
项目312
项目313
项目314
项目321
项目322
项目323
项目324
项目331
项目332
项目333
项目334
jQuery:

<script type="text/javascript">
jQuery(function($) {


    $("#polls").on("click", ".flip", function() {

        $(this)

            .closest('tbody')
            .next('.section')
            .toggle('fast');
    });
});
</script> 

jQuery(函数($){
$(“#轮询”)。在(“单击”,“翻转”,函数()上){
$(本)
.最近的('tbody')
.next(“.section”)
.切换(“快速”);
});
});
在这个jquery中,我已经编写了代码以使切换生效,同时我希望更改图像???

您可以将toggleClass()与jquery一起使用来更改元素的背景图像。例如,如果要更改已单击的
的背景色

小提琴:试试这个

$('.flip').click(function() {
    var $$ = $(this);
      $$.closest('tbody')
        .next('.section')
        .toggle('fast');
    if(!$$.hasClass('active')){
        $$.parent().find('span.plus').hide()
        .end().find('.minus').show();
        $$.addClass('active');
    } else {
        $$.parent().find('.plus').show()
        .end().find('.minus').hide();
        $$.removeClass('active');
    }
});

你的+/-images在哪里你可以使用类名通过css使用图像,或者将不同的图像放在+/-text的位置
$('.flip').click(function() {
    var $$ = $(this);
      $$.closest('tbody')
        .next('.section')
        .toggle('fast');
    if(!$$.hasClass('active')){
        $$.parent().find('span.plus').hide()
        .end().find('.minus').show();
        $$.addClass('active');
    } else {
        $$.parent().find('.plus').show()
        .end().find('.minus').hide();
        $$.removeClass('active');
    }
});