Question

我是jQuery（和javascript）的新手。我有2个重复的“编辑器”，我想在与函数调用者相同的div中包含的段落上执行函数。

我正在使用closest方法查找段落，但我不确定它是最佳解决方案。用元素索引做一些事情会更好吗？

另外，我想为选择器提供上下文以减少遍历的DOM数量。

标记的简化版本：

<div id="wrapper1">
  <div>
    <p class="paragraph">This is text of box #1</p>
  </div>
  <div>
    <div>
      <a href="#" class="doBold">Bold</a>
      <a href="#" class="doItalic">Italic</a>
    </div>
  </div>
</div>

<div id="wrapper2">
  <div>
    <p class="paragraph">This is text of box #2</p>
  </div>
  <div>
    <div>
      <a href="#" class="doBold">Bold</a>
      <a href="#" class="doItalic">Italic</a>
    </div>
  </div>
</div>

jQuery的简化版本：

  $(document).ready(function($){

  var methods = {
    doBold: function () { $(this).closest(':has(.paragraph)').toggleClass('bold') },
    doItalic: function () { $(this).closest(':has(.paragraph)').toggleClass('italic') },
    }

  $('.doBold').click(methods.doBold);
  $('.doItalic').click(methods.doItalic);
  });

Answer 1

试试这个：

$(document).ready(function($) {
    var methods = {
        doBold: function(obj) {
            $(obj).parents("div[id*='wrapper']").find('.paragraph').toggleClass('bold');
        },
        doItalic: function(obj) {
            $(obj).parents("div[id*='wrapper']").find('.paragraph').toggleClass('italic');
        },
    }
    $('.doBold').click(function() {
        methods.doBold(this)
    });
    $('.doItalic').click(function() {
        methods.doItalic(this)
    });
});

另一个解决方案:(你试过）

$(document).ready(function($) {
    var methods = {
        doBold: function(obj) {
            $(obj).closest(":has('.paragraph')").toggleClass('bold');
        },
        doItalic: function(obj) {
            $(obj).closest(":has('.paragraph')").toggleClass('italic');
        },
    }
    $('.doBold').click(function() {
        methods.doBold(this)
    });
    $('.doItalic').click(function() {
        methods.doItalic(this)
    });
});

再解决一个仅在段落上应用类的问题：

$(document).ready(function($) {
    var methods = {
        doBold: function(obj) {
            $(obj).closest(":has('.paragraph')").find('.paragraph').toggleClass('bold');
        },
        doItalic: function(obj) {
            $(obj).closest(":has('.paragraph')").find('.paragraph').toggleClass('italic');
        },
    }
    $('.doBold').click(function() {
        methods.doBold(this)
    });
    $('.doItalic').click(function() {
        methods.doItalic(this)
    });
});

Answer 2

你要找的是“这个”

 $('doBold').click(function(){
     $(this).parents('.paragraph').toggleClass('bold');
 }

Answer 3

这对我来说很好，我唯一可能改变的是要么给编辑器（Editor1，Editor2）段落ID，并引用它们直接$("#Editor1")... 或$(this).closest('p')...

jQuery - 在与函数调用者相同的div中执行函数

3 个答案: