JQuery不能使用foreach循环按钮

Question

嘿伙计们我正在研究我的新MVC应用程序，但...... 我想用这个代码的功能不起作用。 当用户单击任务时，它必须出现在段落中。 正如您所看到的，该功能仅适用于第一个表项。

 $(document).ready(function(){
        $("#btnAdd").click(function () {
            var task = $('#taskDescription').val();
            $("#paragraph").append(task, "    <button>-</button></br>");
        });
    });

.table-left {
            width: 30%;
            display: inline-block;
        }
        tbody {
            overflow: scroll;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-left">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>Dienst</th>

        </tr>
        </thead>
        <tbody>
        
            <tr>
                <td>hey</td>
                <td><button id="btnAdd">+</button></td>
                <input type="hidden" id="taskDescription"   value="hey" />
            </tr>
            <tr>
                <td>hi</td>
                <td><button id="btnAdd">+</button></td>
                <input type="hidden" id="taskDescription"   value="hi" />
            </tr>
            <tr>
                <td>hello</td>
                <td><button id="btnAdd">+</button></td>
                <input type="hidden" id="taskDescription"   value="hello" />
            </tr>
            <tr>
                <td>bye</td>
                <td><button id="btnAdd">+</button></td>
                <input type="hidden" id="taskDescription"   value="bye" />
            </tr>
       
        </tbody>
    </table>
</div>
<p id="paragraph"></p>

谁知道该怎么办？ 我看过这篇文章：Why the jQuery Selectable plugin doesn't work with a foreach generated list?

但它似乎没有解决我的问题

Answer 1

您永远不应该有多个具有相同ID的元素。 ID应该始终是唯一的

其次，要获取与点击的taskDescription相关联的btnAdd的值，请使用$(this).closest('tr').find('.taskDescription').val()

$(document).ready(function() {
  $(".btnAdd").click(function() {
    var task = $(this).closest('tr').find('.taskDescription').val();
    $("#paragraph").append(task, "<button>-</button></br>");
  });
});

代码的工作示例

$(document).ready(function() {
  $(".btnAdd").click(function() {
    var task = $(this).closest('tr').find('.taskDescription').val();
    $("#paragraph").append(task, "<button>-</button></br>");
  });
});

.table-left {
  width: 30%;
  display: inline-block;
}

tbody {
  overflow: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-left">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Dienst</th>

      </tr>
    </thead>
    <tbody>

      <tr>
        <td>hey</td>
        <td><button class="btnAdd">+</button></td>
        <input type="hidden" class="taskDescription" value="hey" />
      </tr>
      <tr>
        <td>hi</td>
        <td><button class="btnAdd">+</button></td>
        <input type="hidden" class="taskDescription" value="hi" />
      </tr>
      <tr>
        <td>hello</td>
        <td><button class="btnAdd">+</button></td>
        <input type="hidden" class="taskDescription" value="hello" />
      </tr>
      <tr>
        <td>bye</td>
        <td><button class="btnAdd">+</button></td>
        <input type="hidden" class="taskDescription" value="bye" />
      </tr>

    </tbody>
  </table>
</div>
<p id="paragraph"></p>

Answer 2

将ID更改为Class 改变Jquery

$(document).ready(function(){
        $(".btnAdd").click(function () {

            var task = $(this).parent().next('input').val();
            $("#paragraph").append(task, "    <button>-</button></br>");
        });
    });

$(document).ready(function(){
        $(".btnAdd").click(function () {
        
            var task = $(this).parent().next('input').val();
            $("#paragraph").append(task, "    <button>-</button></br>");
        });
    });

.table-left {
            width: 30%;
            display: inline-block;
        }
        tbody {
            overflow: scroll;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-left">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>Dienst</th>

        </tr>
        </thead>
        <tbody>
        
            <tr>
                <td>hey</td>
                <td><button class="btnAdd">+</button></td>
                <input type="hidden" class="taskDescription"   value="hey" />
            </tr>
            <tr>
                <td>hi</td>
                <td><button class="btnAdd">+</button></td>
                <input type="hidden" class="taskDescription"   value="hi" />
            </tr>
            <tr>
                <td>hello</td>
                <td><button class="btnAdd">+</button></td>
                <input type="hidden" class="taskDescription"   value="hello" />
            </tr>
            <tr>
                <td>bye</td>
                <td><button class="btnAdd">+</button></td>
                <input type="hidden" class="taskDescription"   value="bye" />
            </tr>
       
        </tbody>
    </table>
</div>
<p id="paragraph"></p>