JQuery onclick 切换具有不同 id 的元素

Question

我有一个 table 状态栏，根据状态显示 material 图标 play/pause。每行都有不同的 ID，我的问题是除非我直接在代码中使用 ID，否则我无法使图标切换 onclick，这不会解决我的问题。我希望代码处理不同的 ID。我试过 this.id，它与 alert() 一起工作，但在代码中，它不工作。

我做错了什么？

HTML

<table id="example" class="display" style="width:100%">
      <thead>
        <tr>
                    <th>satatus</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td ><i id="status-1" aria-hidden="true" medium="" class="v-icon notranslate material-icons theme--light">pause_circle_outline</i></td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>0,800</td>
                </tr>
                <tr>
                    <td><i id="status-2" aria-hidden="true" medium="" class="v-icon notranslate material-icons theme--light">play_circle_outline</i></td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>0,750</td>
                </tr>

 </table>

JS

    $(document).ready(function(){
    $("i").click(function() {
            //alert($(this).attr("id"));
            $(this).attr("id").click(function(){
            //$("#status-1").click(function(){
                $(this).text($(this).text() == 'play_circle_outline' ? 'pause_circle_outline' : 'play_circle_outline');
            });
        });
         });

Answer 1

在这种情况下您不需要 ID，只需使用导致事件的对象即可。试试这个：

$(document).ready(function(){
    $(document).on('click', "i", function() {
            alert($(this).attr("id"));
            $(this).text($(this).text() == 'play_circle_outline' ? 'pause_circle_outline' : 'play_circle_online');
        });
});

$(document).ready(function(){
        $(document).on('click', "i", function() {
                alert($(this).attr("id"));
                $(this).text($(this).text() == 'play_circle_outline' ? 'pause_circle_outline' : 'play_circle_outline');
            });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="example" class="display" style="width:100%">
      <thead>
        <tr>
                    <th>satatus</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td ><i id="status-1" aria-hidden="true" medium="" class="v-icon notranslate material-icons theme--light">pause_circle_online</i></td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>0,800</td>
                </tr>
                <tr>
                    <td><i id="status-2" aria-hidden="true" medium="" class="v-icon notranslate material-icons theme--light">play_circle_outline</i></td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>0,750</td>
                </tr>

 </table>

JQuery onclick 切换具有不同 id 的元素

JQuery onclick toggle on elements with diffrent id

jquery

toggle