如何将Html附加到具有相同数据属性值的相应div？ 单击按钮时，我将数据属性值传递给moda，并且还将其添加到模态中的提交按钮以再次传递值。我想找到具有该data-attribut值的元素并将html附加到它。 图像（1）
<button data-media-select="2" data-gallery-position="2" type="button" class="btn btn-success media-modal-btn" >Image (1)</button>
<div data-gallery-position="2" class="popup-gallery"></div>
<button data-media-select="5" data-gallery-position="3" type="button" class="btn btn-warning media-modal-btn" >Images (5)</button>
<div data-gallery-position="3" class="popup-gallery"></div>
Jquery的：
$mediaModalBtn.on('click',function(){
var mediaSelect = $(this).data('media-select')
, galleryPosition = $(this).data('gallery-position');
$.ajax({
url: 'http://example.com/abc/media',
success: function (result) {
$( "#mediaModalFiles" ).html( result );
$('#mediaModal').modal('show');
$('#selectMediaBtn').attr('data-gallery-position',galleryPosition);
$('#mediaModal').checkboxes('max', mediaSelect);
$("#selectMediaBtn").attr('disabled','disabled');
}
});
});
$('body').delegate('input[name="media[]"]','change',function () {
var media = new Array();
$('input[name="media[]"]:checked').each(function () {
media.push(this.value);
});
if ( media.length > 0 )
{
$("#selectMediaBtn").removeAttr('disabled');
} else {
$("#selectMediaBtn").attr('disabled','disabled');
}
});
$('body').delegate('#selectMediaBtn', 'click', function () {
var galleryPosition = $(this).data('gallery-position')
, targetGalleryPosition = $('.popup-gallery[data-gallery-position = "'+galleryPosition+'" ]')
, media = new Array();
$('input[name="media[]"]:checked').each(function () {
media.push(this.value);
});
if ( media.length > 0 )
{
$.ajax({
url: 'http://example.com/abc/media/fetch',
data: { media : media },
success: function (result) {
$('#mediaModal').modal('hide');
$( targetGalleryPosition ).html( result );
}
});
}
});
答案 0 :(得分：0)
您可以使用 .filter() 过滤其图库位置数据属性中具有相同值的元素：
$(function(){
$(".div_btn").click(function(){
$(".galery_item").removeClass("selected");
var pos=$(this).data("gallery-position");
$(".galery_item").filter(function(){
return $(this).data("gallery-position")==pos;
}).addClass("selected");
});
});.div_btn{
display:inline-block;
width:100px;
height:100%;
text-align:center;
border:5px ridge gray;
cursor:pointer;
}
.div_btn:active{
background:green;
}
.galery_item{
display:inline-block;
width:50px;
height:50px;
text-align:center;
border:5px ridge gray;
}
.selected{
background:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div_btn" data-gallery-position="top">top</div>
<div class="div_btn" data-gallery-position="middle">middle</div>
<div class="div_btn" data-gallery-position="bottom">bottom</div>
<hr/>
<div class="galery_item" data-gallery-position="top"></div>
<div class="galery_item" data-gallery-position="top"></div>
<div class="galery_item" data-gallery-position="top"></div>
<div class="galery_item" data-gallery-position="top"></div>
<div class="galery_item" data-gallery-position="top"></div>
<br/>
<div class="galery_item" data-gallery-position="middle"></div>
<div class="galery_item" data-gallery-position="middle"></div>
<div class="galery_item" data-gallery-position="middle"></div>
<div class="galery_item" data-gallery-position="middle"></div>
<div class="galery_item" data-gallery-position="middle"></div>
<br/>
<div class="galery_item" data-gallery-position="bottom"></div>
<div class="galery_item" data-gallery-position="bottom"></div>
<div class="galery_item" data-gallery-position="bottom"></div>
<div class="galery_item" data-gallery-position="bottom"></div>
<div class="galery_item" data-gallery-position="bottom"></div>