将数据传递到引导模式中的输入标记

我在J2EE项目中工作，并且遇到了一个使我的生活受损的问题：v我已经使用bootstrap，并且已经使用bootstrap模式并将数据传递给模态，但是这次，当我使用相同的代码时，它不起作用。 PS：在其代码片段中，它代表代码是正确的，但在我的项目中并不是这样。这是什么意思。将数据传递到引导模式中的输入标记

$(".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>

来源

2017-04-01 Bashir

$ {p.getDescr（）}替换为$ {p.descr}并请尝试。描述你的私人属性。和$ {p.marque} –

@Gurkan Yesilyurt不存在的问题。 $ {p.getDescr（）}和$ {p.marque}显示没有任何问题。我的问题在于模态。我将$ {p.getDescr（）}的值传递给名为descr的变量，并尝试将它的值放入我的输入标记中，该标记的ID为“descr”，不能分配！我已经使用相同的代码，并没有问题，我不知道现在有什么问题！ – Bashir

它只能在片段中使用一次。您的服务器也一样。它设置一次值，然后它不再工作。当你打开模式时，它的值设置正确，尝试改变它的输入值并重新打开它。即使再次调用attr（）方法，该值也不会改变。 – Linek

编辑：没关系我的职务。你已经发现问题不在于你的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>

来源

2017-04-01 15:35:53 noriMonsta

我想我还有一个问题，我仍然不知道它是什么，因为我的代码在其他项目中工作正常，当我在这里运行代码片段时它工作正常，我添加了答案（没有foreach），它仍然当你的代码正确时不工作..我迷路了！ – Bashir

您的代码段无法使用。打开模式，更改输入的内容并重新打开它。输入内容将停止改变。 'attr（）'方法在这里被错误地使用了。 – Linek

您使用不正确的方法attr()。使用prop()。

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

了解更多关于attr()。最重要的部分是：

不过，关于选中的属性要记住的最重要的概念是，它不对应于checked属性。属性实际上对应于defaultChecked属性，应仅用于设置复选框的初始值。已检查的属性值不会随着复选框的状态而变化，而检查的属性值会变化。因此，跨浏览器兼容的方式来确定是否选中复选框是以使用属性

对于其他动态属性（如selected和value）也是如此。

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

来源

2017-04-01 15:37:01 Linek

也无法正常工作 – Bashir

将数据传递到引导模式中的输入标记

回答

相关问题