如何使用jQuery更改表内的图片

Question

当我按下加号按钮时，我想将图片更改为减号

当您切换出来时，您可以看到减号图片并点击图片，它将被更改为加号图片。

问题：
我不知道如何使用jQuery基于上面的描述创建它。

谢谢！

$(function () {
    $('tr.parent td')
        .on("click", "span.btnn", function () {
        var idOfParent = $(this).parents('tr').attr('id');
        $('tr.child-' + idOfParent).toggle('slow');
    });
});

$('tr.child').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
    <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
        <th>d</th>		
        <th></th>
    </tr>

    <tr class="parent" id=1048>
        <td><span class="btnn">2015 July </span></td>
        <td></td>
        <td></td>
        <td><span class="btnn"><img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/07_plus-16.png" /></span></td>
    </tr>
    <tr class="child child-1048">
        <td>July 7</td>
        <td>test</td>
        <td>test</td>
        <td></td>
    </tr>
    <tr class="child child-1048">
        <td>July 7</td>
        <td>test</td>
        <td>test</td>
        <td></td>
    </tr>


    <tr class="parent" id=5000>
        <td><span class="btnn">2015 July </span></td>
        <td></td>
        <td></td>
        <td><span class="btnn"><img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/07_plus-16.png" /></span></td>
    </tr>			
    <tr class="child child-5000">
        <td>July 7</td>
        <td>test</td>
        <td>test</td>
        <td></td>
    </tr>
    <tr class="child child-5000">
        <td>July 7</td>
        <td>test</td>
        <td>test</td>
        <td></td>
    </tr>
</table>

Answer 1

试试此代码

$(function () {
    $('tr.parent td')
        .on("click", "span.btnn", function () {
            var self = $(this),
                parent = self.parents('tr'),
                idOfParent = parent.attr('id');
            $('tr.child-' + idOfParent).toggle('slow');
            parent.toggleClass('minus');
        });
    $('tr.child').hide();
});

HTML

<table>
<tr>
    <th>
        a
    </th>
    <th>
        b
    </th>
    <th>
        c
    </th>
    <th>
        d
    </th>       
    <th></th>
</tr>


<tr class="parent" id=1048>
    <td><span class="btnn">2015 July </span></td>
    <td></td>
    <td></td>
    <td><span class="btnn btnn-icon"></span></td>
</tr>
<tr class="child child-1048">
    <td>July 7</td>
    <td>test</td>
    <td>test</td>
    <td></td>
</tr>
<tr class="child child-1048">
    <td>July 7</td>
    <td>test</td>
    <td>test</td>
    <td></td>
</tr>


<tr class="parent" id=5000>
    <td><span class="btnn">2015 July </span></td>
    <td></td>
    <td></td>
    <td><span class="btnn btnn-icon"></span></td>
</tr>           
<tr class="child child-5000">
    <td>July 7</td>
    <td>test</td>
    <td>test</td>
    <td></td>
</tr>
<tr class="child child-5000">
    <td>July 7</td>
    <td>test</td>
    <td>test</td>
    <td></td>
</tr>

CSS

.btnn-icon{
    width:20px;
    height:20px;
    display:block;
    background:url('https://cdn0.iconfinder.com/data/icons/basic-ui-elements-   round/700/07_plus-16.png') 0 0 no-repeat;
}
.minus .btnn-icon{
    background:url('https://cdn0.iconfinder.com/data/icons/player-set/154/loop-minus-16.png') 0 0 no-repeat;
}

工作小提琴 http://jsfiddle.net/vmyxa51o/

Answer 2

你可以通过Jquery改变像这样

<tr class="parent" id=5000>
    <td><span class="btnn">2015 July </span></td>
    <td></td>
    <td></td>
    <td><span class="btnn" data-id="plus"><img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/07_plus-16.png" /></span></td>
</tr>

只需在Span.btnn中添加Data-id作为属性

现在Jquery

 $(document).ready(function ()
    {
      $('.btnn').click(function ()
      {
        var state = $(this).attr('data-id');
        if(state == 'plus')
        {
           //Change To Minus Image
          $(this).html('<img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/07_minus-16.png">');
          $(this).attr('data-id','minus');
        }
        else
        {
           //Change To Plus Image
           $(this).html('<img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/07_plus-16.png">');
          $(this).attr('data-id','plus');
        }
      })

    });

Answer 3

使用来自jquery

的this.children [0] .src尝试获取此图像

＆＃13;

＆＃13;

$(function () {
        $('tr.parent td')
            .on("click", "span.btnn", function () {
                var idOfParent = $(this).parents('tr').attr('id');
                $('tr.child-' + idOfParent).toggle('slow');
          if( this.children[0].src=="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/07_plus-16.png")
      this.children[0].src="https://cdn0.iconfinder.com/data/icons/player-set/154/loop-minus-16.png";
          else
             this.children[0].src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/07_plus-16.png"
            });
    });


    $('tr.child').hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
    <tr>
        <th>
            a
        </th>
        <th>
            b
        </th>
        <th>
            c
        </th>
        <th>
            d
        </th>		
        <th></th>
    </tr>
	
	
	<tr class="parent" id=1048>
		<td><span class="btnn">2015 July </span></td>
		<td></td>
		<td></td>
		<td><span class="btnn"><img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/07_plus-16.png" /></span></td>
	</tr>
	<tr class="child child-1048">
		<td>July 7</td>
		<td>test</td>
		<td><test/td>
		<td></td>
	</tr>
	<tr class="child child-1048">
		<td>July 7</td>
		<td>test</td>
		<td>test</td>
		<td></td>
	</tr>


	<tr class="parent" id=5000>
		<td><span class="btnn">2015 July </span></td>
		<td></td>
		<td></td>
		<td><span class="btnn"><img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/07_plus-16.png" /></span></td>
	</tr>			
	<tr class="child child-5000">
		<td>July 7</td>
		<td>test</td>
		<td>test</td>
		<td></td>
	</tr>
	<tr class="child child-5000">
		<td>July 7</td>
		<td>test</td>
		<td>test</td>
		<td></td>
	</tr>


</table>

＆＃13;

＆＃13;

＆＃13;