javascript - 如何在更新卡片的弹出窗口中获取 2 个 div 值。

Question

我正在创建一个看板化应用程序，我的网页上有显示标题和描述的卡片。单击卡片，我想显示标题和描述以及用户在卡片创建过程中选择的计划开始和完成日期.

这是我的 html:

    <a href="#" data-toggle="modal" data-target="#newModal" data-whatever="EditCard" style="color:darkred;">
        <div data-id="<%= tablelist[i].NC_TITLE %>" class="open-AddCardTitle" style="text-align: center; background-color: burlywood;"  name="title" ><%= tablelist[i].NC_TITLE %></div>
        <div data-id="<%= tablelist[i].NC_DESC %>" class="open-AddCardDesc" style="text-align: center; height: 50px;" name="desc"><%= tablelist[i].NC_DESC %></div>
    </a>
     <!-- Modal- Edit Card -->
     <div class="modal fade" id="newModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
      <div class="modal-content">
      <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h4 class="modal-title">Update Card</h4>
      </div>
      <form action="editcard" method="post" id="editcard" class="form-horizontal" role="form">
        <div class="modal-body" style="height: 230px;">
         <div class="form-group">
            <label for="title" class="col-md-3 control-label">Title</label>
             <div class="col-md-9">
               <input type="text" class="form-control" id="title" name="title" value=""/>
              </div>
              </div>
            <div class="form-group">
            <label for="title" class="col-md-3 control-label">Description</label>
            <div class="col-md-9">
               <textarea class="form-control" id="desc" name="desc" value=""></textarea>
            </div>
           </div>

          <div class="form-group">
            <label for="priority" class="col-md-3 control-label">Date Range</label>
            <div class="col-md-4">
                 <input type="text" id="datepicker2" name="startdate" Placeholder="Planned Start Date...">
            </div>
            <div class="col-md-4">
                 <input type="text" id="datepicker3" name="finishdate" Placeholder="Planned Finish Date...">
            </div>
            </div>
           </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             <button type="submit" class="btn btn-primary">Update Card</button>
           </div>
          </form>
         </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
       </div><!-- /.modal -->

Javascript:

 <script>
   $(document).on("click", ".open-AddCardTitle", function () {
    var title = $(this).data('id');
    $(".modal-body #title").val( title );
    });

    $(document).on("click", ".open-AddCardDesc", function () { 
     var desc = $(this).data('id');
     $(".modal-body #desc").val( desc );
    });
    </script> 

请告诉我如何在同一次点击中同时获得标题和描述，而不是分别点击两个 div。谢谢。

Answer 1

试着给你的 anchor 一个类或id

 <a href="#" class="anchorforCard" data-toggle="modal" data-target="#newModal" data-whatever="EditCard" style="color:darkred;">
    </a>

然后使用点击

$(document).ready(function(){
   $('.anchorforCard').on('click',function(e){
     e.preventDefault();
      var title = $(this).find('.open-AddCardTitle').data('id');
      $(".modal-body #title").val( title );
      var desc = $(this).find('.open-AddCardDesc').data('id');
      $(".modal-body #desc").val( desc );
   });
});

可能您需要添加 overflow:hidden;锚定元素