分类导航

程序问答发布时间：2022-05-31 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了使用 jquery .toggleClass() 时切换虚线边框，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决使用 jquery .toggleClass() 时切换虚线边框？

开发过程中遇到使用 jquery .toggleClass() 时切换虚线边框的问题如何解决？下面主要结合日常开发的经验，给出你关于使用 jquery .toggleClass() 时切换虚线边框的解决方法建议，希望对你解决使用 jquery .toggleClass() 时切换虚线边框有所启发或帮助；

我试图在单击选定的 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");
    });
  });
  
});

解决方法

考虑使用这样的函数：

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;
}

这样，您就可以像 @H_374_15@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>

查看更多：