以引導方式將數據傳遞到輸入標簽

Question

我在一個J2EE項目中工作，遇到了一個困擾我的生活的問題：v我已經在使用bootstrap了，我已經在使用bootstrap模態並將數據傳遞給modal了，但是這一次，當我使用相同的代碼時，它不會工作。

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> 

Answer 1

編輯：沒關系我的帖子。 您已經確定問題出在您的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> 

Answer 2

您錯誤地使用了attr()方法。 使用prop() 。

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

了解更多有關attr（）的信息 。 最重要的部分是：

但是，要記住有關選中屬性的最重要概念是它不對應於選中屬性。 該屬性實際上對應於defaultChecked屬性，並且應僅用於設置復選框的初始值。 選中的屬性值不會隨着復選框的狀態而改變，而選中的屬性會改變。 因此，確定是否選中復選框的跨瀏覽器兼容方法是使用屬性

其他動態屬性（例如選定和值）也是如此。

換句話說， attr()方法僅更改屬性的默認值（在這種情況下為value）。 如果您更改輸入value並嘗試使用attr()方法進行更改，則它將無效，因為默認值！=當前值。 要更改當前值，您必須使用prop()或val()方法。