jquery，数据属性，引导模式

所以我真的是新的数据属性的东西，我的jQuery技能是非常新鲜的。希望我问这个权利！jquery，数据属性，引导模式

我想使用数据属性将内容添加到引导模式。根据用户点击的图片，他们会得到一个内容不同的模式。照片工作（其他人写的），但我还需要添加文字。它从这里开始，我在数据属性中输入我想要的内容。我加入了数据设为myVal部分：

<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./assets/loveinonlandis.jpg" data-myval="this is text">

这里是“通用”模式的代码，每个光元素的使用：

<div id="galleryModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     <div class="modal-body"> 
      <img src="" id="galleryImage" class="img-responsive" /> 
      <div id="galleryText"><!--I added this, this is where I want the data-myval to go (in this div)--></div> 
      <p> 
       <br/> 
       <button class="btn btn-primary btn-lg center-block" data-dismiss="modal" aria-hidden="true">Close <i class="ion-android-close"></i></button> 
      </p> 
     </div> 
    </div> 
    </div> 
</div>

而且运行事物的jQuery：

$('#galleryModal').on('show.bs.modal', function (e) { 
    $('#galleryImage').attr("src",$(e.relatedTarget).data("src")); 
    $('#galleryText').data('myval'); //this is the wrong part, but i want to put my text from data-myval into the modal at id galleryText 

});

我该如何编写，以便我可以从data-myval的内容中添加我的文本？

感谢您的帮助！

来源

2017-08-12 wfsu media

在这里，你去了一个解决方案https://jsfiddle.net/jv8dpv5x/

$('#galleryModal').on('show.bs.modal', function (e) { 
 
    $('#galleryImage').attr("src",$(e.relatedTarget).data("src")); 
 
    $('#galleryText').text($(e.relatedTarget).data('myval')); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<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> 
 
<a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="./assets/loveinonlandis.jpg" data-myval="this is text">Open Modal</a> 
 

 
<div id="galleryModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"> 
 
    <div class="modal-dialog modal-lg"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
      <img src="" id="galleryImage" class="img-responsive" /> 
 
      <div id="galleryText"><!--I added this, this is where I want the data-myval to go (in this div)--></div> 
 
      <p> 
 
       <br/> 
 
       <button class="btn btn-primary btn-lg center-block" data-dismiss="modal" aria-hidden="true">Close <i class="ion-android-close"></i></button> 
 
      </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

变化的代码 $('#galleryText').text($(e.relatedTarget).data('myval'));

来源

2017-08-12 04:21:14 Shiladitya

谢谢！你可以推荐和资源如何学习自己写这个吗？我猜想几种方法来解决这个问题，但没有得到它的工作。如果我只需要学习更多的jquery，那也没关系！ –

您可以像src属性一样检索数据属性值。

$(document).ready(function(){ 
    $('#galleryModal').on('show.bs.modal', function (e) { 
    var text = $(e.relatedTarget).data('myval'); 
    $('#galleryImage').attr("src",$(e.relatedTarget).data("src")); 
    $('#galleryText').text(text); 
    }); 
});

来源

2017-08-12 03:53:53

jquery，数据属性，引导模式

回答

相关问题