jquery - 如何添加一个类到对应的popup中

Question

我有两个 div

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

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

如果单击第一个插件，是否可以按名称“foroneclass”添加类，使其看起来像这样

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

同样

如果单击“第二个插件”，是否可以按名称“fortwolass”添加类，使其看起来像这样

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

这是我的 fiddle http://jsfiddle.net/cod7ceho/109/

Answer 1

当然。给猫剥皮有几种方法

基本解决方案

根据您的 fiddle ，您可以扩展以下两行:

第 8 行 是:

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

变成:

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

和第 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');
});

更新了 fiddle : http://jsfiddle.net/cod7ceho/110/