使用 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 回调应用于 .draggable 元素的直接子元素的所有 p 元素。

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

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

Answer 2

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

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

toggle a dotted border when using jquery .toggleClass()

jquery

jquery-ui