使用 jquery .toggleClass() 时切换虚线边框

Question

我正在尝试在单击选定的 p 标签时在它周围切换虚线边框。

我使用 css 脚本对其进行了格式化，然后在 jQuery 中添加了一个 toggleClass()，但是当我运行我的程序时，它不起作用。虚线边框不出现。

有谁知道如何让 toggleClass() jQuery 工作？提前谢谢你。

我将在下面分享我的代码：https://codepen.io/monkeycrane2010/pen/poEXENr

HTML

<h1 style="text-align: center;">Baseline</h1>
<div id="draggable" class="ui-widget-content">
 
  <p>Text box to drag</p>
</div>

<button id="sheepbtn">+New </button>

<div id="one">Library Box</div>

<p>animal rocks!</p>

CSS

#draggable {
     width: 150px; height: 150px; padding: 0.5em; 
};

.selected {
  border: 10px dotted orange;
};

JavaScript

$(function () {
  $("#draggable").draggable();
  $("#draggable").resizable();

  $("#sheepbtn").on("click", function () {
    $("#one").append($("<p>tester</p>").draggable()); // CREATE NEW

    $("p").each(function (index) {
      // EACH
      $(this).attr("id", index);
      console.log(index + ": " + $(this).text());
    });

    $("p").on("click", function (event) {
      // CLASS
      $("h1").html(this.id);
      $(this).toggleClass("selected");
    });
  });
  
});

Answer 1

考虑使用这样的函数：

function makeNewDrag(str, trg) {
  str = str != undefined ? str : "";
  trg = trg != undefined ? $(trg) : $("body");
  var n = $("<div>", {
    class: "draggable ui-widget-content"
  }).appendTo(trg);
  $("<p>").html(str).appendTo(n);
  n.draggable().resizable()
  return n;
}

这样，你可以像makeNewDrag("Tester", $("#one"))一样使用它。

这里有一个更完整的例子。这会将click 回调应用于所有p 元素，这些元素是.draggable 元素的直接子元素。

$(function() {
  function makeNewDrag(str, trg) {
    str = str != undefined ? str : "";
    trg = trg != undefined ? $(trg) : $("body");
    var n = $("<div>", {
      class: "draggable ui-widget-content"
    }).appendTo(trg);
    $("<p>").html(str).appendTo(n);
    n.draggable().resizable()
    return n;
  }
  $(".draggable").draggable().resizable();

  $("#sheepbtn").on("click", function() {
    makeNewDrag("Tester", $("#one"));
  });

  $("body").on("click", ".draggable > p", function() {
    $(this).toggleClass("selected");
  });
});

.draggable {
  width: 150px;
  height: 150px;
  padding: 0.5em;
}

.selected {
  border: 10px dotted orange;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<h1 style="text-align: center;">Baseline</h1>
<div class="draggable ui-widget-content">
  <p>Text box to drag</p>
</div>

<button id="sheepbtn">+New</button>

<div id="one" class="draggable ui-widget-content">Library Box</div>

<p>animal rocks!</p>

查看更多：

• https://api.jquery.com/on/

当提供selector 时，事件处理程序被称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，而只会调用与选择器匹配的后代（内部元素）。 jQuery 将事件从事件目标冒泡到附加处理程序的元素（即从最内到最外的元素），并为匹配选择器的路径上的任何元素运行处理程序。

Answer 2

我回答了我自己的问题 - 请参阅我上面的评论。我犯了一个 css 语法错误。