javascript - 基于改变ID的Jquery组合功能

Question

好的，目前我下面的功能正在按预期工作，但我将有 30 多个问题，因此我正在寻找某种类型的方法来循环浏览 ID 或问题。

每个函数中唯一变化的因素是 ID。

// Q1
  $('#pq1').click(function() {
    $("#pq1 span.answer").toggleClass("short-answer");        
    $("#pq1 .expand-btn").text(($("#pq1 .expand-btn").text() == 'Read More') ? 'Read Less' : 'Read More').fadeIn();
  })

// Q2
  $('#pq2').click(function() {
    $("#pq2 span.answer").toggleClass("short-answer");
    $("#pq2 .expand-btn").text(($("#pq2 .expand-btn").text() == 'Read More') ? 'Read Less' : 'Read More').fadeIn();
  })

// Q3
  $('#pq3').click(function() {
    $("#pq3 span.answer").toggleClass("short-answer");
    $("#pq3 .expand-btn").text(($("#pq3 .expand-btn").text() == 'Read More') ? 'Read Less' : 'Read More').fadeIn();
  })

关于如何组合这些功能以便我不需要 30+ 个功能的任何想法都会很有帮助!谢谢。

示例:https://jsfiddle.net/7xb59a01/3/

Answer 1

是的，你应该使用类:

$('.pq').click(function() {
    var $pq = $(this);
    $pq.find("span.answer").toggleClass("short-answer");        
    $pq.find(".expand-btn").text(($pq.find(".expand-btn").text() == 'Read More') ? 'Read Less' : 'Read More').fadeIn();
});