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

I have 6 paragraphs as follows:

我有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> 

Now I have a jQuery code to prepend paragraph numbers to these paragraphs as follows:

现在我有一个jQuery代码来为这些段落添加段落编号,如下所示:

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

Now the requirement is to make a toggle master button clicking on which once: - enables highlighting the respective paragraph on clicking of respective paragraph number.

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

Clicking again on the master button: - disables highlighting the paragraphs on clicking of respective paragraph numbers.

再次单击主按钮: - 禁用在单击相应段落编号时突出显示段落。

I tried this code.

我试过这段代码。

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

If I click anywhere on the paragraph, it is working. I want it to work only if I click on the prepended paragraph no.

如果我点击该段落的任何地方,它就可以了。我希望它只有在我点击前面的段落号时才能工作。

If anyone has some idea, please share.

如果有人有想法,请分享。

1 个解决方案

#1

While I think that using a <p> to contain the counter of 'original' paragraphs is somewhat wrong, I'd suggest this approach as an option:

虽然我认为使用

来包含“原始”段落的计数器有些不对,但我建议将此方法作为一种选择:

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

As I mentioned, above, that I think using a <p> element is wrong &ndash a counter does not, really, constitute a paragraph – I'd suggest instead adding a child-element to the <p> elements, and use CSS to position it outside of that <p> element.

正如我上面提到的,我认为使用

元素是错误的&ndash计数器实际上并不构成一个段落 - 我建议改为将一个子元素添加到

元素,并使用CSS将它放在

元素之外。

This maintains a relationship between the two elements and simplifies the event-binding:

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

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

Further, to address the requirement that the answer must provide the click functionality only, I'll offer this, which adapts your existing code:

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

$("#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;
}

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

References:

• before().
• closest().
• next().
• on().
• prepend().
• prev().
• toggleClass().