基本解决方案

Question

我有两个div

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

每个div都有一个名为 addonsBtn 的按钮类，当点击它时会打开一个弹出窗口并将数据附加到相应的弹出窗口

如果单击First Addon，是否可以按名称'foroneclass'添加类，以便它看起来像这样

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

同样

如果单击Second Addon，是否可以按名称'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");

清洁剂解决方案

我已经清理了你的jsfiddle文件了一下。我们可以通过采用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 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 3

$(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 4

这是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

});

你可以在Button的数据属性中添加Popup Class和Id引用 - 不需要If语句 -

 <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 5

在这里，我建议采用一种更简单的方法。让我们说你把欲望的类名放在你们两个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 6

以下是我可以通过的代码链接，它可以帮助您 -

JSFiddle

在代码中添加这些行

JAVASCRIPT Code

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

如何将类添加到相应的弹出窗口中

6 个答案:

基本解决方案

清洁剂解决方案