2023年2月6日 13:14:27go评论61阅读模式

英文:

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

1. What is the type of pin that has 3 swaged grooves at 120⁰ pitch along its side?

a. Taper Pin
b. Dowel Pin

c. Grooved Pin
d. Knurled Pin

2. What is the type of pin that was used to control compression of part made with Plastic?

a. Taper Pin
b. Dowel Pin

c. Grooved Pin
d. Knurled Pin

3. What is the Taper Ratio of a Taper Pin?

a. 2:1
b. 1:50

c. 1:100
d. 2:50

英文:

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(&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;);
  });
})

.__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;
}

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

答案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:

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

.__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;
}

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

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

每个div标签内的高亮部分

问题

答案1

简单的Django中的HTML表单

Datatables如何正确排序这个表格？

你需要为 GA4 使用防闪烁代码吗？

在 JSON 中插入键值对 (key & value)，插入位置是没有答案的地方。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论