Question

我有6个段落如下：

<div id="col2">

<p class="firstparagraph"> firstparagraph </p>
<p class="secondparagraph"> secondparagraph </p>
<p class="thirdparagraph">  thirdparagrap  </p>
<p class="fourthparagraph"> fourthparagraph </p>
<p class="fifthparagraph">  fifthparagraph  </p>
<p class="sixthparagraph">  sixthparagraph  </p>
</div>

现在我有一个jQuery代码，可以将段落编号添加到这些段落中，如下所示：

$("#buttonGparano").click(function(){
$("#col2 p").each(function(count){
        $(this).prepend(count+1);
    });
    $(this).off("click");
});

现在要求点击一次切换主按钮： - 可以在单击相应的段落编号时突出显示相应的段落。

再次点击主按钮： - 禁止在单击相应的段落编号时突出显示段落。

我尝试了这段代码。

$("#buttonHhighlight").click(function(){
$("#col2 p").click(function(){
$(this).toggleClass("orig");
});
});
<style>
.orig
{
background-color:yellow;
}
</style>

如果我点击段落的任何地方，它就可以了。我希望它只有在我点击前面的段落号

时才能工作

如果有人有任何想法，请分享。

Answer 1

虽然我认为使用<p>来包含“原始”段落的计数器有些不对，但我建议将此方法作为一种选择：

// iterate over the relevant <p> elements:
// using the before() method to insert
// new elements before the selected elements:
$('#col2 p').before(function(i) {

  // here we create a <p> element:
  return $('<p />', {
    // setting the text to the index of
    // the <p> element found in the
    // original collection:
    'text': i,

    // supplying a class-name to the
    // class attribute:
    'class' : 'count'
  });
// before() returns the original element
// before which the new content was inserted;
// here we use prev() to find the previous
// element (that we just inserted)
// and then use on() to bind a click
// event-handler:
}).prev().on('click', function() {

  // this finds the next() sibling element
  // and, in response to the clicks,
  // toggles the 'orig' class-name:
  $(this).next().toggleClass('orig');
});

$('#col2 p').before(function(i) {
  return $('<p />', {
    'text': i,
    'class' : 'count'
  });
}).prev().on('click', function() {
  $(this).next().toggleClass('orig');
});

.count {
  cursor: pointer;
}
.orig {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="col2">
  <p class="firstparagraph">firstparagraph</p>
  <p class="secondparagraph">secondparagraph</p>
  <p class="thirdparagraph">thirdparagrap</p>
  <p class="fourthparagraph">fourthparagraph</p>
  <p class="fifthparagraph">fifthparagraph</p>
  <p class="sixthparagraph">sixthparagraph</p>
</div>

正如我上面提到的那样，我认为使用<p>元素是错误的＆amp; ndash一个计数器实际上不构成一个段落 - 我建议改为向{{{{}添加一个子元素1}}元素，并使用CSS将其定位在<p>元素之外。

这维护了两个元素之间的关系并简化了事件绑定：

<p>

// selecting the <p> elements,
// using the prepend() method to
// insert a new child-element at
// the beginning of the <p> elements:
$('#col2 p').prepend(function(i) {

  // creating a <span> element:
  return $('<span />', {
    // setting its text to the index
    // of the <p>:
    'text': i,

    // setting the class-name:
    'class': 'counter'

  // binding a click event-handler:
  }).on('click', function() {

    // on clicking the <span> the
    // closest ancestor <p> element has
    // the class-name of 'orig' toggled:
    $(this).closest('p').toggleClass('orig');
  });
});

$('#col2 p').prepend(function(i) {
  return $('<span />', {
    'text': i,
    'class': 'counter'
  }).on('click', function() {
    $(this).closest('p').toggleClass('orig');
  });
});

p {
  position: relative;
  margin-left: 2em;
  min-height: 2em;
}
.counter {
  position: absolute;
  top: 0;
  right: 100%;
  width: 2em;
  cursor: pointer;
}
.orig {
  background-color: yellow;
}

此外，为了满足答案必须提供仅的点击功能的要求，我将提供此功能，以适应您现有的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="col2">
  <p class="firstparagraph">firstparagraph</p>
  <p class="secondparagraph">secondparagraph</p>
  <p class="thirdparagraph">thirdparagrap</p>
  <p class="fourthparagraph">fourthparagraph</p>
  <p class="fifthparagraph">fifthparagraph</p>
  <p class="sixthparagraph">sixthparagraph</p>
</div>

$("#col2 p").each(function(count) {
  // here we wrap the prepended counter with
  // a <span> element, in order to distinguish
  // the counter from the rest of the <p>:
  $(this).prepend('<span class="counter">' + (count + 1) + '</span>')

    // finding the prepended <span> (because
    // prepend() returns the element to which it
    // was prepended):
    .find('span.counter')
    // binding the click event-handler:
    .on('click', function() {
      // toggling the 'orig' class on the
      // closest <p> ancestor:
      $(this).closest('p').toggleClass('orig');
  });
});

$("#col2 p").each(function(count) {
  $(this).prepend('<span class="counter">' + (count + 1) + '</span>').find('span.counter').on('click', function() {
    $(this).closest('p').toggleClass('orig');
  });
});

.counter {
  display: inline-block;
  cursor: pointer;
  margin-right: 0.5em;
}
.orig {
  background-color: yellow;
}

参考文献：

如何通过使用jQuery单击前面的段落编号来更改相应段落的背景颜色？

1 个答案: