如何點擊時，它會打開一個彈出窗口，然後將數據追加到一個類添加到相應的彈出

Question

我有兩個div的

<div id="one"> 
and 
<div id="two"> 

每個div都得到了一個按鈕類名爲addonsBtn，如果第一個附加組件點擊相應的彈出

，是有可能的名字添加類「foroneclass」，使它看起來這樣

<div data-role="popup" id="addonsWrap789" class='foroneclass' data-theme="a"> 
</div> 

小號imilarly

如果點擊了第二插件，是可以通過名字添加類「fortwolass」，使它看起來這樣

<div data-role="popup" id="addonsWrap790" class='fortwolass' data-theme="a"> 
</div> 

這是我的小提琴 http://jsfiddle.net/cod7ceho/109/

Answer 1

肯定。還有對皮膚有貓

幾種方法

，基本解決方案

根據你的小提琴，你可以擴展以下兩行：

Line 8是：

$("#addonsWrap789").popup({history: false}).popup('open').enhanceWithin(); 

變成：

$("#addonsWrap789").popup({history: false}).popup('open').enhanceWithin().addClass("foroneclassfo"); 

而且line 15：

$("#addonsWrap790").popup({history: false}).popup('open').enhanceWithin(); 

變爲：

$("#addonsWrap790").popup({history: false}).popup('open').enhanceWithin().addClass("foretwoclassfo"); 

清潔液

我已經清理你的Ĵ sfiddle文件了一下。我們可以通過採取toppname並將所需的類後綴追加到最後來以更多的可重用方式來處理它。這樣，你可以有2或10個模態，它會繼續按預期工作。

$(document).on('click', '.addonsBtn', function (e) { 
    var toppname = $(this).data('toppname'); 
    var html = '<div class="popup_inner addonsContent"><div class="popup_content"><div class="popup_content_addonsWrap"><div class="addonsListWrap"><h3>Toppings</h3><ul><li><form><div class="ui-checkbox ui-mini"></div></form></li></ul></div></div></div></div>'; 

    $("#addonsWrap789").html(html).trigger('create').trigger('pagecreate'); 
    $("#addonsWrap789").trigger('create').trigger('pagecreate'); 
    $("#addonsWrap789").popup({history: false}).popup('open').enhanceWithin().addClass(toppname + 'class'); 
}); 

更新小提琴： http://jsfiddle.net/cod7ceho/110/

Answer 2

$(document).on('click', '.addonsBtn', function(e) { 
    var toppname = $(this).data('toppname'); 
    var id = $(this).attr('id'); 
    var html = '<div class="popup_inner addonsContent"><div class="popup_content"><div class="popup_content_addonsWrap"><div class="addonsListWrap"><h3>Toppings</h3><ul><li><form><div class="ui-checkbox ui-mini"></div></form></li></ul></div></div></div></div>'; 

    $("#" + id).html(html).trigger('create').trigger('pagecreate'); 
    $("#" + id).trigger('create').trigger('pagecreate'); 
    $("#" + id).popup({ 
    history: false 
    }).popup('open').enhanceWithin().addClass(toppname); 

}); 

Answer 3

這裏是一個Demo

$(document).on('click', '.addonsBtn', function(e) { 
var $toppName = $(this).data('toppname'), 
    $topClass = $(this).data('topclass'), 
    $popup = $("#" + $(this).data("popup")), 
    $popupContent = '<div class="popup_inner addonsContent"><div class="popup_content"><div class="popup_content_addonsWrap"><div class="addonsListWrap"><h3>Toppings</h3><ul><li><form><div class="ui-checkbox ui-mini"></div></form></li></ul></div></div></div></div>'; 

    $($popup).html($popupContent).trigger('create').trigger('pagecreate'); 
    $($popup).trigger('create').trigger('pagecreate'); 
    $($popup).popup({ 
    history: false 
    }).popup('open').enhanceWithin().addClass($topClass); 

// addClass method will keep the class even when the popup is hidden 

}); 

，您可以在按鈕的數據中添加彈出class和id的參考屬性 - 無需如果報表 -

<button class='btn-d addonsBtn' data-toppname="forone" data-topclass="foroneclassfo" data-popup="addonsWrap789" ui-btn ui-shadow ui-corner-all><a data-rel="popup" data-position-to="window" aria-haspopup="true" aria-expanded="false" class="ui-link">Addons First Item</a></button> 

Answer 4

在這裏，我建議一個更簡單的方法來做到這一點。比方說，你把慾望類名放在你的div的一個屬性中。

div id="one" key="foroneclass" and div id="two" key="fortwolass"

現在當用戶點擊你能做的就是選擇屬性鍵的值。

var current_clasname = $(this).attr("key");

然後將其放置在彈出窗口的類名稱中。

$(".pop_up").removeAttr("class"); // To make sure that previous class is removed!! 
$(".pop_up").adddClass(current_clasname);

Answer 5

$(document).on('click', '.addonsBtn', function(e) { 
    var toppname = $(this).data('toppname'); 
    var html = '<div class="popup_inner addonsContent"><div class="popup_content"><div class="popup_content_addonsWrap"><div class="addonsListWrap"><h3>Toppings</h3><ul><li><form><div class="ui-checkbox ui-mini"></div></form></li></ul></div></div></div></div>'; 
    if (toppname === 'forone') { 
     $("#addonsWrap789").addClass($(this).attr('data-toppname')+'class'); 
     $("#addonsWrap789").html(html).trigger('create').trigger('pagecreate'); 
     $("#addonsWrap789").trigger('create').trigger('pagecreate'); 
     $("#addonsWrap789").popup({ 
      history: false 
     }).popup('open').enhanceWithin(); 
    } else if (toppname === 'fortwo') { 
     $("#addonsWrap790").addClass($(this).attr('data-toppname')+'class'); 
     $("#addonsWrap790").html(html).trigger('create').trigger('pagecreate'); 
     $("#addonsWrap790").trigger('create').trigger('pagecreate'); 
     $("#addonsWrap790").popup({ 
      history: false 
     }).popup('open').enhanceWithin(); 
    } 
}); 

突出這一代碼：

$("#addonsWrap789").addClass($(this).attr('data-toppname')+'class'); 

和：

$("#addonsWrap790").addClass($(this).attr('data-toppname')+'class'); 

Answer 6

這裏是我的代碼鏈接，您可以通過它可能是它可以幫助你 -

JSFiddle

在你的代碼

JAVASCRIPT Code 

$('#addonsWrap789').addClass('foroneclass'); 
$('#addonsWrap790').addClass('fortwoclass');