英文:
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(".__QNnChoiceContainer").forEach((chosenAns) => {
$(chosenAns).on('click', '.__choicesMLExam', function () {
$('.__QNnChoiceContainer .__choicesMLExam.__theAnswerMLExam').removeClass('__theAnswerMLExam');
$(this).addClass('__theAnswerMLExam');
});
})
<!-- language: lang-css -->
.__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;
}
<!-- language: lang-html -->
<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>
<!-- 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 -->
$('body').on('click', '.__choicesMLExam', function () {
$(this).parents('.ChoicesExam').find('.__choicesMLExam').removeClass('__theAnswerMLExam');
$(this).addClass('__theAnswerMLExam');
});
<!-- language: lang-css -->
.__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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论