每个div标签内的高亮部分

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

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

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

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

  1. .__theAnswerMLExam{
  2.   position:relative;
  3. }
  4. .__theAnswerMLExam:before{
  5.   content:&quot;&quot;;
  6.   background-color:#d2ffd2;
  7.   width:100%;
  8.   height:1em;
  9.   position:absolute;
  10.   z-index:-1;
  11.   filter:url(#marker-shape);
  12.   top:0.1em;
  13.   padding:0 0.25em;
  14. }
  16. #QuestionMLExam{
  17.   font-size: 25px;
  18. }
  20. .ChoicesExam{
  21.   font-size: 22px;
  22.   display: flex;
  23.   flex-direction: row;
  24.   align-items: center;
  25.   column-gap: 45%;
  26. }
  27. .__choicesMLExam{
  28.   font-weight: normal !important;
  29.   cursor: pointer;
  30.   width: auto;
  31. }
  32. .__QNnChoiceContainer{
  33.   margin: 20px 0;
  34. }
  36. .__rightChoiceExamML, .__leftChoiceExamML{
  37.   display: flex;
  38.   justify-content: space-between;
  39.   flex-direction: column;
  40. }
  41. .__wrapContainerExamML{
  42.   display: flex;
  43.   flex-wrap: wrap;
  44.   justify-content: space-around;
  45.   margin: 75px 0;
  46. }

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

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;div class=&quot;__QNnChoiceContainer&quot;&gt;
  3.   &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;
  4.   &lt;div class=&quot;ChoicesExam&quot;&gt;
  5.     &lt;div class=&quot;__leftChoiceExamML&quot;&gt;
  6.       &lt;label&gt;a. &lt;span id=&quot;choicesAExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Taper Pin&lt;/span&gt;&lt;/label&gt;
  7.       &lt;label&gt;b. &lt;span id=&quot;choicesBExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Dowel Pin&lt;/span&gt;&lt;/label&gt;
  8.     &lt;/div&gt;
  9.     &lt;div class=&quot;__rightChoiceExamML&quot;&gt;
  10.       &lt;label&gt;c. &lt;span id=&quot;choicesCExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Grooved Pin&lt;/span&gt;&lt;/label&gt;
  11.       &lt;label&gt;d. &lt;span id=&quot;choicesDExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Knurled Pin&lt;/span&gt;&lt;/label&gt;
  12.     &lt;/div&gt;
  13.   &lt;/div&gt;
  14. &lt;/div&gt;
  15. &lt;div class=&quot;__QNnChoiceContainer&quot;&gt;
  16.   &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;
  17.   &lt;div class=&quot;ChoicesExam&quot;&gt;
  18.     &lt;div class=&quot;__leftChoiceExamML&quot;&gt;
  19.       &lt;label&gt;a. &lt;span id=&quot;choicesAExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Taper Pin&lt;/span&gt;&lt;/label&gt;
  20.       &lt;label&gt;b. &lt;span id=&quot;choicesBExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Dowel Pin&lt;/span&gt;&lt;/label&gt;
  21.     &lt;/div&gt;
  22.     &lt;div class=&quot;__rightChoiceExamML&quot;&gt;
  23.       &lt;label&gt;c. &lt;span id=&quot;choicesCExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Grooved Pin&lt;/span&gt;&lt;/label&gt;
  24.       &lt;label&gt;d. &lt;span id=&quot;choicesDExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Knurled Pin&lt;/span&gt;&lt;/label&gt;
  25.     &lt;/div&gt;
  26.   &lt;/div&gt;
  27. &lt;/div&gt;
  28. &lt;div class=&quot;__QNnChoiceContainer&quot;&gt;
  29.   &lt;label id=&quot;QuestionMLExam&quot;&gt;3. What is the Taper Ratio of a Taper Pin?&lt;/label&gt;
  30.   &lt;div class=&quot;ChoicesExam&quot;&gt;
  31.     &lt;div class=&quot;__leftChoiceExamML&quot;&gt;
  32.       &lt;label&gt;a. &lt;span id=&quot;choicesAExamML&quot;  class=&quot;__choicesMLExam&quot;&gt;2:1&lt;/span&gt;&lt;/label&gt;
  33.       &lt;label&gt;b. &lt;span id=&quot;choicesBExamML&quot; class=&quot;__choicesMLExam&quot;&gt;1:50&lt;/span&gt;&lt;/label&gt;
  34.     &lt;/div&gt;
  35.     &lt;div class=&quot;__rightChoiceExamML&quot;&gt;
  36.       &lt;label&gt;c. &lt;span id=&quot;choicesCExamML&quot; class=&quot;__choicesMLExam&quot;&gt;1:100&lt;/span&gt;&lt;/label&gt;
  37.       &lt;label&gt;d. &lt;span id=&quot;choicesDExamML&quot; class=&quot;__choicesMLExam&quot;&gt;2:50&lt;/span&gt;&lt;/label&gt;
  38.     &lt;/div&gt;
  39.   &lt;/div&gt;
  40. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

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

代码示例：

  1. $('body').on('click', '.__choicesMLExam', function () {
  2.   $(this).parents('.ChoicesExam').find('.__choicesMLExam').removeClass('__theAnswerMLExam');
  3.   $(this).addClass('__theAnswerMLExam');
  4. });
  1. .__theAnswerMLExam {
  2.   position: relative;
  3. }
  4. .__theAnswerMLExam:before {
  5.   content: "";
  6.   background-color: #d2ffd2;
  7.   width: 100%;
  8.   height: 1em;
  9.   position: absolute;
  10.   z-index: -1;
  11.   filter: url(#marker-shape);
  12.   top: 0.1em;
  13.   padding: 0 0.25em;
  14. }
  16. #QuestionMLExam {
  17.   font-size: 25px;
  18. }
  20. .ChoicesExam {
  21.   font-size: 22px;
  22.   display: flex;
  23.   flex-direction: row;
  24.   align-items: center;
  25.   column-gap: 45%;
  26. }
  27. .__choicesMLExam {
  28.   font-weight: normal !important;
  29.   cursor: pointer;
  30.   width: auto;
  31. }
  32. .__QNnChoiceContainer {
  33.   margin: 20px 0;
  34. }
  36. .__rightChoiceExamML, .__leftChoiceExamML {
  37.   display: flex;
  38.   justify-content: space-between;
  39.   flex-direction: column;
  40. }
  41. .__wrapContainerExamML {
  42.   display: flex;
  43.   flex-wrap: wrap;
  44.   justify-content: space-around;
  45.   margin: 75px 0;
  46. }
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <div class="__QNnChoiceContainer">
  3.   <label id="QuestionMLExam">1. What is the type of pin that has 3 swaged grooves at 120⁰ pitch along its side?</label>
  4.   <div class="ChoicesExam">
  5.     <div class="__leftChoiceExamML">
  6.       <label>a. <span id="choicesAExamML" class="__choicesMLExam">Taper Pin</span></label>
  7.       <label>b. <span id="choicesBExamML" class="__choicesMLExam">Dowel Pin</span></label>
  8.     </div>
  9.     <div class="__rightChoiceExamML">
  10.       <label>c. <span id="choicesCExamML" class="__choicesMLExam">Grooved Pin</span></label>
  11.       <label>d. <span id="choicesDExamML" class="__choicesMLExam">Knurled Pin</span></label>
  12.     </div>
  13.   </div>
  14. </div>
  15. <div class="__QNnChoiceContainer">
  16.   <label id="QuestionMLExam">2. What is the type of pin that was used to control compression of part made with Plastic?</label>
  17.   <div class="ChoicesExam">
  18.     <div class="__leftChoiceExamML">
  19.       <label>a. <span id="choicesAExamML" class="__choicesMLExam">Taper Pin</span></label>
  20.       <label>b. <span id="choicesBExamML" class="__choicesMLExam">Dowel Pin</span></label>
  21.     </div>
  22.     <div class "__rightChoiceExamML">
  23.       <label>c. <span id="choicesCExamML" class="__choicesMLExam">Grooved Pin</span></label>
  24.       <label>d. <span id="choicesDExamML" class="__choicesMLExam">Knurled Pin</span></label>
  25.     </div>
  26.   </div>
  27. </div>
  28. <div class="__QNnChoiceContainer">
  29.   <label id="QuestionMLExam">3. What is the Taper Ratio of a Taper Pin?</label>
  30.   <div class="ChoicesExam">
  31.     <div class="__leftChoiceExamML">
  32.       <label>a. <span id="choicesAExamML" class="__choicesMLExam">2:1</span></label>
  33.       <label>b. <span id="choicesBExamML" class="__choicesMLExam">1:50</span></label>
  34.     </div>
  35.     <div class="__rightChoiceExamML">
  36.       <label>c. <span id="choicesCExamML" class="__choicesMLExam">1:100</span></label>
  37.       <label>d. <span id="choicesDExamML" class="__choicesMLExam">2:50</span></label>
  38.     </div>
  39.   </div>
  40. </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 -->

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

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

  1. .__theAnswerMLExam{
  2.   position:relative;
  3. }
  4. .__theAnswerMLExam:before{
  5.   content:&quot;&quot;;
  6.   background-color:#d2ffd2;
  7.   width:100%;
  8.   height:1em;
  9.   position:absolute;
  10.   z-index:-1;
  11.   filter:url(#marker-shape);
  12.   top:0.1em;
  13.   padding:0 0.25em;
  14. }
  16. #QuestionMLExam{
  17.   font-size: 25px;
  18. }
  20. .ChoicesExam{
  21.   font-size: 22px;
  22.   display: flex;
  23.   flex-direction: row;
  24.   align-items: center;
  25.   column-gap: 45%;
  26. }
  27. .__choicesMLExam{
  28.   font-weight: normal !important;
  29.   cursor: pointer;
  30.   width: auto;
  31. }
  32. .__QNnChoiceContainer{
  33.   margin: 20px 0;
  34. }
  36. .__rightChoiceExamML, .__leftChoiceExamML{
  37.   display: flex;
  38.   justify-content: space-between;
  39.   flex-direction: column;
  40. }
  41. .__wrapContainerExamML{
  42.   display: flex;
  43.   flex-wrap: wrap;
  44.   justify-content: space-around;
  45.   margin: 75px 0;
  46. }

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

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;div class=&quot;__QNnChoiceContainer&quot;&gt;
  3.   &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;
  4.   &lt;div class=&quot;ChoicesExam&quot;&gt;
  5.     &lt;div class=&quot;__leftChoiceExamML&quot;&gt;
  6.       &lt;label&gt;a. &lt;span id=&quot;choicesAExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Taper Pin&lt;/span&gt;&lt;/label&gt;
  7.       &lt;label&gt;b. &lt;span id=&quot;choicesBExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Dowel Pin&lt;/span&gt;&lt;/label&gt;
  8.     &lt;/div&gt;
  9.     &lt;div class=&quot;__rightChoiceExamML&quot;&gt;
  10.       &lt;label&gt;c. &lt;span id=&quot;choicesCExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Grooved Pin&lt;/span&gt;&lt;/label&gt;
  11.       &lt;label&gt;d. &lt;span id=&quot;choicesDExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Knurled Pin&lt;/span&gt;&lt;/label&gt;
  12.     &lt;/div&gt;
  13.   &lt;/div&gt;
  14. &lt;/div&gt;
  15. &lt;div class=&quot;__QNnChoiceContainer&quot;&gt;
  16.   &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;
  17.   &lt;div class=&quot;ChoicesExam&quot;&gt;
  18.     &lt;div class=&quot;__leftChoiceExamML&quot;&gt;
  19.       &lt;label&gt;a. &lt;span id=&quot;choicesAExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Taper Pin&lt;/span&gt;&lt;/label&gt;
  20.       &lt;label&gt;b. &lt;span id=&quot;choicesBExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Dowel Pin&lt;/span&gt;&lt;/label&gt;
  21.     &lt;/div&gt;
  22.     &lt;div class=&quot;__rightChoiceExamML&quot;&gt;
  23.       &lt;label&gt;c. &lt;span id=&quot;choicesCExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Grooved Pin&lt;/span&gt;&lt;/label&gt;
  24.       &lt;label&gt;d. &lt;span id=&quot;choicesDExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Knurled Pin&lt;/span&gt;&lt;/label&gt;
  25.     &lt;/div&gt;
  26.   &lt;/div&gt;
  27. &lt;/div&gt;
  28. &lt;div class=&quot;__QNnChoiceContainer&quot;&gt;
  29.   &lt;label id=&quot;QuestionMLExam&quot;&gt;3. What is the Taper Ratio of a Taper Pin?&lt;/label&gt;
  30.   &lt;div class=&quot;ChoicesExam&quot;&gt;
  31.     &lt;div class=&quot;__leftChoiceExamML&quot;&gt;
  32.       &lt;label&gt;a. &lt;span id=&quot;choicesAExamML&quot;  class=&quot;__choicesMLExam&quot;&gt;2:1&lt;/span&gt;&lt;/label&gt;
  33.       &lt;label&gt;b. &lt;span id=&quot;choicesBExamML&quot; class=&quot;__choicesMLExam&quot;&gt;1:50&lt;/span&gt;&lt;/label&gt;
  34.     &lt;/div&gt;
  35.     &lt;div class=&quot;__rightChoiceExamML&quot;&gt;
  36.       &lt;label&gt;c. &lt;span id=&quot;choicesCExamML&quot; class=&quot;__choicesMLExam&quot;&gt;1:100&lt;/span&gt;&lt;/label&gt;
  37.       &lt;label&gt;d. &lt;span id=&quot;choicesDExamML&quot; class=&quot;__choicesMLExam&quot;&gt;2:50&lt;/span&gt;&lt;/label&gt;
  38.     &lt;/div&gt;
  39.   &lt;/div&gt;
  40. &lt;/div&gt;

<!-- end snippet -->

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

发表评论

匿名网友

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

确定