每个div标签内的高亮部分

huangapple go评论59阅读模式
英文:

highlight span per div tag

问题

以下是翻译好的部分:

"Got this multiple choices examination..
I am in a part where the examinee choosing the correct answer,
I am doing it fine but the problem is when I add the number two question..
which the highlight answer changing also into another div. Any logic or other way without changing the HMTL.........................................

Here's my code


document.querySelectorAll(".__QNnChoiceContainer").forEach((chosenAns) => {
$(chosenAns).on('click', '.__choicesMLExam', function () {
$('.__QNnChoiceContainer .__choicesMLExam.__theAnswerMLExam').removeClass('__theAnswerMLExam');
$(this).addClass('__theAnswerMLExam');
});
})

.__theAnswerMLExam{
position:relative;
}
.__theAnswerMLExam:before{
content:"";
background-color:#d2ffd2;
width:100%;
height:1em;
position:absolute;
z-index:-1;
filter:url(#marker-shape);
top:0.1em;
padding:0 0.25em;
}

#QuestionMLExam{
font-size: 25px;
}

.ChoicesExam{
font-size: 22px;
display: flex;
flex-direction: row;
align-items: center;
column-gap: 45%;
}
.__choicesMLExam{
font-weight: normal !important;
cursor: pointer;
width: auto;
}
.__QNnChoiceContainer{
margin: 20px 0;
}

.__rightChoiceExamML, .__leftChoiceExamML{
display: flex;
justify-content: space-between;
flex-direction: column;
}
.__wrapContainerExamML{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 75px 0;
}








"

英文:

Got this multiple choices examination..
I am in a part where the examinee choosing the correct answer,
I am doing it fine but the problem is when i add the number two question..
which the highlight answer changing also into another div. Any logic or other way without changing the HMTL.........................................

Here's my code

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.querySelectorAll(&quot;.__QNnChoiceContainer&quot;).forEach((chosenAns) =&gt; {
  $(chosenAns).on(&#39;click&#39;, &#39;.__choicesMLExam&#39;, function () {
    $(&#39;.__QNnChoiceContainer .__choicesMLExam.__theAnswerMLExam&#39;).removeClass(&#39;__theAnswerMLExam&#39;);
    $(this).addClass(&#39;__theAnswerMLExam&#39;);
  });
})

<!-- language: lang-css -->

.__theAnswerMLExam{
  position:relative;
}
.__theAnswerMLExam:before{
  content:&quot;&quot;;
  background-color:#d2ffd2;
  width:100%;
  height:1em;
  position:absolute;
  z-index:-1;
  filter:url(#marker-shape);
  top:0.1em;
  padding:0 0.25em;
}

#QuestionMLExam{
  font-size: 25px;
}

.ChoicesExam{
  font-size: 22px;
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 45%;
}
.__choicesMLExam{
  font-weight: normal !important;
  cursor: pointer;
  width: auto;
}
.__QNnChoiceContainer{
  margin: 20px 0;
}

.__rightChoiceExamML, .__leftChoiceExamML{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.__wrapContainerExamML{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 75px 0;
}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;div class=&quot;__QNnChoiceContainer&quot;&gt;
  &lt;label id=&quot;QuestionMLExam&quot;&gt;1. What is the type of pin that has 3 swaged grooves at 120⁰ pitch along its side?&lt;/label&gt;
  &lt;div class=&quot;ChoicesExam&quot;&gt;
    &lt;div class=&quot;__leftChoiceExamML&quot;&gt;
      &lt;label&gt;a. &lt;span id=&quot;choicesAExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Taper Pin&lt;/span&gt;&lt;/label&gt;
      &lt;label&gt;b. &lt;span id=&quot;choicesBExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Dowel Pin&lt;/span&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class=&quot;__rightChoiceExamML&quot;&gt;
      &lt;label&gt;c. &lt;span id=&quot;choicesCExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Grooved Pin&lt;/span&gt;&lt;/label&gt;
      &lt;label&gt;d. &lt;span id=&quot;choicesDExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Knurled Pin&lt;/span&gt;&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;__QNnChoiceContainer&quot;&gt;
  &lt;label id=&quot;QuestionMLExam&quot;&gt;2. What is the type of pin that was used to control compression of part made with Plastic?&lt;/label&gt;
  &lt;div class=&quot;ChoicesExam&quot;&gt;
    &lt;div class=&quot;__leftChoiceExamML&quot;&gt;
      &lt;label&gt;a. &lt;span id=&quot;choicesAExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Taper Pin&lt;/span&gt;&lt;/label&gt;
      &lt;label&gt;b. &lt;span id=&quot;choicesBExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Dowel Pin&lt;/span&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class=&quot;__rightChoiceExamML&quot;&gt;
      &lt;label&gt;c. &lt;span id=&quot;choicesCExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Grooved Pin&lt;/span&gt;&lt;/label&gt;
      &lt;label&gt;d. &lt;span id=&quot;choicesDExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Knurled Pin&lt;/span&gt;&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;__QNnChoiceContainer&quot;&gt;
  &lt;label id=&quot;QuestionMLExam&quot;&gt;3. What is the Taper Ratio of a Taper Pin?&lt;/label&gt;
  &lt;div class=&quot;ChoicesExam&quot;&gt;
    &lt;div class=&quot;__leftChoiceExamML&quot;&gt;
      &lt;label&gt;a. &lt;span id=&quot;choicesAExamML&quot;  class=&quot;__choicesMLExam&quot;&gt;2:1&lt;/span&gt;&lt;/label&gt;
      &lt;label&gt;b. &lt;span id=&quot;choicesBExamML&quot; class=&quot;__choicesMLExam&quot;&gt;1:50&lt;/span&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class=&quot;__rightChoiceExamML&quot;&gt;
      &lt;label&gt;c. &lt;span id=&quot;choicesCExamML&quot; class=&quot;__choicesMLExam&quot;&gt;1:100&lt;/span&gt;&lt;/label&gt;
      &lt;label&gt;d. &lt;span id=&quot;choicesDExamML&quot; class=&quot;__choicesMLExam&quot;&gt;2:50&lt;/span&gt;&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

你可以针对当前点击的问题块进行操作。然后只为该问题添加/移除类。

代码示例:

$('body').on('click', '.__choicesMLExam', function () {
  $(this).parents('.ChoicesExam').find('.__choicesMLExam').removeClass('__theAnswerMLExam');
  $(this).addClass('__theAnswerMLExam');
});
.__theAnswerMLExam {
  position: relative;
}
.__theAnswerMLExam:before {
  content: "";
  background-color: #d2ffd2;
  width: 100%;
  height: 1em;
  position: absolute;
  z-index: -1;
  filter: url(#marker-shape);
  top: 0.1em;
  padding: 0 0.25em;
}

#QuestionMLExam {
  font-size: 25px;
}

.ChoicesExam {
  font-size: 22px;
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 45%;
}
.__choicesMLExam {
  font-weight: normal !important;
  cursor: pointer;
  width: auto;
}
.__QNnChoiceContainer {
  margin: 20px 0;
}

.__rightChoiceExamML, .__leftChoiceExamML {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.__wrapContainerExamML {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 75px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="__QNnChoiceContainer">
  <label id="QuestionMLExam">1. What is the type of pin that has 3 swaged grooves at 120⁰ pitch along its side?</label>
  <div class="ChoicesExam">
    <div class="__leftChoiceExamML">
      <label>a. <span id="choicesAExamML" class="__choicesMLExam">Taper Pin</span></label>
      <label>b. <span id="choicesBExamML" class="__choicesMLExam">Dowel Pin</span></label>
    </div>
    <div class="__rightChoiceExamML">
      <label>c. <span id="choicesCExamML" class="__choicesMLExam">Grooved Pin</span></label>
      <label>d. <span id="choicesDExamML" class="__choicesMLExam">Knurled Pin</span></label>
    </div>
  </div>
</div>
<div class="__QNnChoiceContainer">
  <label id="QuestionMLExam">2. What is the type of pin that was used to control compression of part made with Plastic?</label>
  <div class="ChoicesExam">
    <div class="__leftChoiceExamML">
      <label>a. <span id="choicesAExamML" class="__choicesMLExam">Taper Pin</span></label>
      <label>b. <span id="choicesBExamML" class="__choicesMLExam">Dowel Pin</span></label>
    </div>
    <div class "__rightChoiceExamML">
      <label>c. <span id="choicesCExamML" class="__choicesMLExam">Grooved Pin</span></label>
      <label>d. <span id="choicesDExamML" class="__choicesMLExam">Knurled Pin</span></label>
    </div>
  </div>
</div>
<div class="__QNnChoiceContainer">
  <label id="QuestionMLExam">3. What is the Taper Ratio of a Taper Pin?</label>
  <div class="ChoicesExam">
    <div class="__leftChoiceExamML">
      <label>a. <span id="choicesAExamML" class="__choicesMLExam">2:1</span></label>
      <label>b. <span id="choicesBExamML" class="__choicesMLExam">1:50</span></label>
    </div>
    <div class="__rightChoiceExamML">
      <label>c. <span id="choicesCExamML" class="__choicesMLExam">1:100</span></label>
      <label>d. <span id="choicesDExamML" class="__choicesMLExam">2:50</span></label>
    </div>
  </div>
</div>
英文:

You can target currently clicked question block. Then add/remove class for that question only.

Code Example:
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(&#39;body&#39;).on(&#39;click&#39;, &#39;.__choicesMLExam&#39;, function () {
$(this).parents(&#39;.ChoicesExam&#39;).find(&#39;.__choicesMLExam&#39;).removeClass(&#39;__theAnswerMLExam&#39;);
$(this).addClass(&#39;__theAnswerMLExam&#39;);
});

<!-- language: lang-css -->

.__theAnswerMLExam{
  position:relative;
}
.__theAnswerMLExam:before{
  content:&quot;&quot;;
  background-color:#d2ffd2;
  width:100%;
  height:1em;
  position:absolute;
  z-index:-1;
  filter:url(#marker-shape);
  top:0.1em;
  padding:0 0.25em;
}

#QuestionMLExam{
  font-size: 25px;
}

.ChoicesExam{
  font-size: 22px;
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 45%;
}
.__choicesMLExam{
  font-weight: normal !important;
  cursor: pointer;
  width: auto;
}
.__QNnChoiceContainer{
  margin: 20px 0;
}

.__rightChoiceExamML, .__leftChoiceExamML{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.__wrapContainerExamML{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 75px 0;
}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;div class=&quot;__QNnChoiceContainer&quot;&gt;
  &lt;label id=&quot;QuestionMLExam&quot;&gt;1. What is the type of pin that has 3 swaged grooves at 120⁰ pitch along its side?&lt;/label&gt;
  &lt;div class=&quot;ChoicesExam&quot;&gt;
    &lt;div class=&quot;__leftChoiceExamML&quot;&gt;
      &lt;label&gt;a. &lt;span id=&quot;choicesAExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Taper Pin&lt;/span&gt;&lt;/label&gt;
      &lt;label&gt;b. &lt;span id=&quot;choicesBExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Dowel Pin&lt;/span&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class=&quot;__rightChoiceExamML&quot;&gt;
      &lt;label&gt;c. &lt;span id=&quot;choicesCExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Grooved Pin&lt;/span&gt;&lt;/label&gt;
      &lt;label&gt;d. &lt;span id=&quot;choicesDExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Knurled Pin&lt;/span&gt;&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;__QNnChoiceContainer&quot;&gt;
  &lt;label id=&quot;QuestionMLExam&quot;&gt;2. What is the type of pin that was used to control compression of part made with Plastic?&lt;/label&gt;
  &lt;div class=&quot;ChoicesExam&quot;&gt;
    &lt;div class=&quot;__leftChoiceExamML&quot;&gt;
      &lt;label&gt;a. &lt;span id=&quot;choicesAExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Taper Pin&lt;/span&gt;&lt;/label&gt;
      &lt;label&gt;b. &lt;span id=&quot;choicesBExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Dowel Pin&lt;/span&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class=&quot;__rightChoiceExamML&quot;&gt;
      &lt;label&gt;c. &lt;span id=&quot;choicesCExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Grooved Pin&lt;/span&gt;&lt;/label&gt;
      &lt;label&gt;d. &lt;span id=&quot;choicesDExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Knurled Pin&lt;/span&gt;&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;__QNnChoiceContainer&quot;&gt;
  &lt;label id=&quot;QuestionMLExam&quot;&gt;3. What is the Taper Ratio of a Taper Pin?&lt;/label&gt;
  &lt;div class=&quot;ChoicesExam&quot;&gt;
    &lt;div class=&quot;__leftChoiceExamML&quot;&gt;
      &lt;label&gt;a. &lt;span id=&quot;choicesAExamML&quot;  class=&quot;__choicesMLExam&quot;&gt;2:1&lt;/span&gt;&lt;/label&gt;
      &lt;label&gt;b. &lt;span id=&quot;choicesBExamML&quot; class=&quot;__choicesMLExam&quot;&gt;1:50&lt;/span&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class=&quot;__rightChoiceExamML&quot;&gt;
      &lt;label&gt;c. &lt;span id=&quot;choicesCExamML&quot; class=&quot;__choicesMLExam&quot;&gt;1:100&lt;/span&gt;&lt;/label&gt;
      &lt;label&gt;d. &lt;span id=&quot;choicesDExamML&quot; class=&quot;__choicesMLExam&quot;&gt;2:50&lt;/span&gt;&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月6日 13:14:27
  • 转载请务必保留本文链接:https://go.coder-hub.com/75357542.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定