如何將Html添加到相同類別的相應div

-1

如何將Html附加到具有相同數據屬性值的相應div？當按鈕被點擊時，我將一個數據屬性值傳遞給moda，並且它還被添加到模式中的提交按鈕以將值重新傳回。我想找到具有該數據屬性值的元素並將html附加到它。圖像（1）如何將Html添加到相同類別的相應div

 <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); 
       } 
      }); 
     } 
    });

來源

2015-02-06 Karthik Rajan

最新的問題是什麼？你的代碼中哪部分不起作用？ – atmd 2015-02-06 07:51:30

我認爲你正在尋找'$（「。class [data-attribute = value]」）'來選擇給定的框，但我不想破譯你的代碼......（編輯其實你是這麼做的什麼不工作？） – somethinghere 2015-02-06 07:52:29

也許他在做什麼是問答 – 2015-02-06 07:55:52

可以使用.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>

來源

2015-02-06 08:25:24 Banana

如何將Html添加到相同類別的相應div

回答

相關問題