时间戳

首页 > 解决方案 > 如何基于某个类（javascript/jQuery）动态添加段落？

javascript - 如何基于某个类（javascript/jQuery）动态添加段落？

问题描述

我正在尝试基于某个ID（#switch-labelX）的hasClass（右/左）动态添加某些段落，并在jQuery中循环。

我在初始情况下所拥有的（尚未应用 jQuery）：

<div class="widget-switch-btn-wrapper widget-switch-btn-wrapper-default checked">
  <small id="#switch-label1" class="widget-switch-btn right">
  </small>
</div>
<div class="widget-switch-btn-wrapper widget-switch-btn-wrapper-default checked">
  <small id="#switch-label2" class="widget-switch-btn left">
  </small>
</div>

通过循环几个“小”标签为开关提供初始标签，并将开关标签也作为选项标签：

<div class="widget-switch-btn-wrapper widget-switch-btn-wrapper-default checked">
  <small id="#switch-label1" class="widget-switch-btn right">
   <p style="text-align: center;padding-top: 1%;color: white;">Other</p>
  </small>
   <p style="text-align: left;padding-left: 15%;;color: #092a72; display:inline">Kom</p>
   <p style="text-align: left;padding-left: 35%;padding-top: 1%;color: #092a72;display:inline">Other</p>
</div>
<div class="widget-switch-btn-wrapper widget-switch-btn-wrapper-default checked">
  <small id="#switch-label2" class="widget-switch-btn left">
   <p style="text-align: center;padding-top: 1%;color: white;">Other</p>
  </small>
   <p style="text-align: left;padding-left: 15%;;color: #092a72; display:inline">Kom</p>
   <p style="text-align: left;padding-left: 35%;padding-top: 1%;color: #092a72;display:inline">Other</p>
</div>

每次当“小”类更改（右/左）时，它应该清除/重写这些标签（内联段落也可以写一次）。

我现在的代码是：

  //find all the switch btns with the switch btn
    $(' .widget-switch-btn').each(function (index) {


            //create idlabel for switch
            var idLabel = '#switch-label' + (index + 1);

            //set the switch id for all switch btn's
            $(this).attr('id', idLabel);

//set other fixed labels
 $('.widget-switch-btn').after('<p style="text-align: left;padding-left: 15%;;color: #092a72; display:inline">Komatsu</p><p style="text-align: left;padding-left: 35%;padding-top: 1%;color: #092a72;display:inline">Other</p>');
});

标签： javascripthtmljquerycss

解决方案

首先，您编写它的方式不需要该hasClass方法。$(idLabel+".right")总是有“正确”的班级。它在您的选择器中。

但要完成这项工作，您需要使用on：

$(document).on('change', idLabel, function(e) {
  $target = $(e.target); // cache the element that changed so you maintain its state
  if ($target.hasClass('right')) {
    $target.html('<p style="text-align: center;padding-top: 1%;color: white;">Other</p>');
    alert("right");
  } else if ($target.hasClass('left')) {
    $target.html('<p style="text-align: center;padding-top: 1%;color: white;">Kom</p>');
    alert("left");
  }
});

推荐阅读