添加一个容器元素，并向其附加一个侦听器，以便在触发子元素时捕获这些子元素的事件（参见event delegation）。如果点击了showAnswerBtn，则从其数据集中破坏按钮的parentElement和answer值。使用父元素执行新的选择，以在 * 其 * 数据集中查找具有选项值的段落，然后向其添加新的"正确"类。

// Cache the container, and add a listener to it
const container = document.querySelector('.container');
container.addEventListener('click', handleClick);

function handleClick(e) {

  // If the clicked element has a `showAnswerBtn` class
  if (e.target.matches('.showAnswerBtn')) {

    // Destructure the parentElement, and answer value
    // (from its dataset)
    const { parentElement, dataset: { answer } } = e.target;
    
    // Create a new selector using that answer value
    const selector = `p[data-option="${answer}"]`;
    
    // And use that to find the correct answer
    const correct = parentElement.querySelector(selector);

    // Add a new class to the correct answer
    correct.classList.add('correct');    
  }
}

.correct { font-weight: bold; color: green; }

<div class="container">
  <div class="question">
    <p> <b>1. पृथ्वी पर दिन और रात होते हैं?</b> </p>
    <p class="option-q0" data-option="a">(A) दैनिक गति के कारण</p>
    <p class="option-q0" data-option="b">(B) वार्षिक गति के कारण </p>
    <p class="option-q0" data-option="c">(C) छमाही गति के कारण</p>
    <p class="option-q0" data-option="d">(D) तिमाही गति के कारण </p>
    <button class="btn btn-xs btn-primary showAnswerBtn" data-answer="a" data-id="0" name="button" type="button"> Show Answer </button>
  </div>
  <div class="question">
    <p> <b>2. सबसे बड़ा ग्रह है?</b> </p>
    <p class="option-q1" data-option="a">(A) बृहस्पति</p>
    <p class="option-q1" data-option="b">(B) पृथ्वी</p>
    <p class="option-q1" data-option="c">(C) युरेनस</p>
    <p class="option-q1" data-option="d">(D) शुक्र</p>
    <button class="btn btn-xs btn-primary showAnswerBtn" data-answer="a" data-id="1" name="button" type="button"> Show Answer </button>
  </div>
  <div class="question">
    <p> <b>3. सबसे छोटा ग्रह है?</b> </p>
    <p class="option-q2" data-option="a">(A) मंगल</p>
    <p class="option-q2" data-option="b">(B) शनि</p>
    <p class="option-q2" data-option="c">(C) बुध</p>
    <p class="option-q2" data-option="d">(D) नेप्चून</p>
    <button class="btn btn-xs btn-primary showAnswerBtn" data-answer="c" data-id="2" name="button" type="button"> Show Answer </button>
  </div>
  <div class="question">
    <p> <b>4. अगुलहास धारा किस महासागर में बनती है ?</b> </p>
    <p class="option-q3" data-option="a">(A) प्रशान्त महासागर में</p>
    <p class="option-q3" data-option="b">(B) हिन्द महासागर में </p>
    <p class="option-q3" data-option="c">(C) आर्कटिक महासागर में </p>
    <p class="option-q3" data-option="d">(D) अन्य</p>
    <button class="btn btn-xs btn-primary showAnswerBtn" data-answer="b" data-id="3" name="button" type="button"> Show Answer </button>
  </div>
  <div class="question">
    <p> <b>5. पृथ्वी का सबसे भीतर वाला भाग क्रोड किसका बना होता है ?</b> </p>
    <p class="option-q4" data-option="a">(A) ताँबा और जस्ता </p>
    <p class="option-q4" data-option="b">(B) निकेल और ताँबा</p>
    <p class="option-q4" data-option="c">(C) लोहा और जस्ता </p>
    <p class="option-q4" data-option="d">(D) लोहा और निकेल</p>
    <button class="btn btn-xs btn-primary showAnswerBtn" data-answer="d" data-id="4" name="button" type="button"> Show Answer </button>
  </div>
</div>

增加文件

• Destructuring assignment
• classList
• matches
• Template/string literals