在引导模式中将数据传递给输入标签

Question

我在一个 J2EE 项目中工作，遇到了一个毁了我生活的问题：v 我已经使用过引导程序，并且我已经使用引导程序模式并将数据传递给模式，但是这一次，当我使用相同的代码时，它不起作用。

PS：在 sn-p 中它可以工作，这意味着代码是正确的，但在我的项目中它没有。这是什么意思。

$(".modal-link").click(function() {
  $("#descr").attr('value', $(this).attr('descr'));
  $($(this).attr('href')).modal('show');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class='modal small fade' id='myModal' 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>
        <h3 id='myModalLabel'>Detail</h3>
      </div>
      <div class='modal-body' id="Details">
        <input id="descr" name="descr" value="" />
      </div>
      <div class='modal-footer'>
        <button class='btn btn-default' data-dismiss='modal' aria-hidden='true'>Fermer</button>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <c:forEach items='${liste}' var='p'>
    <div class="col-sm-6 col-md-4">
      <div class="media services-wrap wow fadeInDown">
        <div class="pull-left">

        </div>
        <div class="media-body">
          <h3 class="media-heading">${p.getMarque()}</h3>
          <p id="des">${p.getDescr()}</p>
        </div>
        <a href="#myModal" class="modal-link" var descr="${p.getDescr()}" role='button' data-toggle='modal'>
          <i class="glyphicon glyphicon-eye-open">View</i>
        </a>
      </div>
    </div>
  </c:forEach>
</div>

Answer 1

您错误地使用了attr() 方法。使用prop()。

$(".modal-link").click(function() {
  $("#descr").prop('value', $(this).attr('descr'));
  $($(this).attr('href')).modal('show');
});

在attr() 上阅读更多信息。最重要的部分是：

尽管如此，关于检查的最重要的概念是要记住 属性是它不对应于选中的属性。这 属性实际上对应于 defaultChecked 属性和 应该只用于设置复选框的初始值。这 选中的属性值不随状态改变 复选框，而选中的属性确实如此。因此， 确定是否选中复选框的跨浏览器兼容方法是 使用属性

其他动态属性也是如此，例如 selected 和 value。

换句话说，attr() 方法仅更改属性的默认值（在这种情况下为值）。如果您更改输入value 并尝试使用attr() 方法来更改它，它将不起作用，因为默认值！= 当前值。要更改当前值，您必须使用 prop() 或 val() 方法。

Answer 2

编辑：别介意我的帖子。您已经发现问题不在于您的 javascript 或标记。

您的代码似乎运行良好，因此问题显然出在其他地方。 我只取出了 foreach 循环和变量，并对描述进行了硬编码。根据按下的链接，模式内的输入会填充不同的描述。顺便说一句，您不需要使用 .show() 显式打开模式。

$(".modal-link").click(function() {

  $("#descr").attr("value", $(this).attr('descr'));
  //$($(this).attr('href')).modal('show');


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />



<div class='modal small fade' id='myModal' 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>
        <h3 id='myModalLabel'>Detail</h3>
      </div>
      <div class='modal-body' id="Details">
        <input id="descr" name="descr" value="" />
      </div>
      <div class='modal-footer'>
        <button class='btn btn-default' data-dismiss='modal' aria-hidden='true'>Fermer</button>

      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="media services-wrap wow fadeInDown">
      <div class="pull-left">

      </div>
      <div class="media-body">

      </div>
      <a href="#myModal" class="modal-link" var descr="Description 1" role='button' data-toggle='modal'>
        <i class="glyphicon glyphicon-eye-open">View</i>
      </a>
    </div>
  </div>
<div class="col-sm-6 col-md-4">
    <div class="media services-wrap wow fadeInDown">
      <div class="pull-left">

      </div>
      <div class="media-body">

      </div>
      <a href="#myModal" class="modal-link" var descr="Description 2" role='button' data-toggle='modal'>
        <i class="glyphicon glyphicon-eye-open">View</i>
      </a>
    </div>
  </div>

</div>