同じ行に複数の結果を返す方法（jQueryのヘルプ）

Question

私はこの質問のタイトルが非常に有用ではないことを知っています。しかし、私が達成しようとしていることを教えてくれるでしょう。

説明が分かりやすいので、私の例をご覧ください。

データのquestionidと1から1または1〜2を（コンソールで）出力するデータのansweridを記録していますが、両方の回答が選択されている場合（.active）にしたいクエリをコンソールの同じ行に1〜1; 1〜2として返します（今のところ）。しかし、私は両方を選択する瞬間に、単にコンソールに出力するだけです。

あなたは私の質問が理にかなって助けてくれることを願っています。

ありがとうございました。

$('.answer').on('click', function(event) { 
 
    $(this).toggleClass("active"); 
 
    var questionid = $(".question").data("questionid"); 
 
    var answerid = $(".answer.active").data("answerid"); 
 
    //console.log("questionid " + questionid); 
 
\t //console.log("answerid " + answerid); 
 
    var query = questionid + "~" + answerid; 
 
    console.log(query) 
 
});

.active { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="question" data-questionid="1">Question 1</div> 
 
<div class="answer" data-answerid="1">Answer 1</div> 
 
<div class="answer" data-answerid="2">Answer 2</div>

Answer 1

$(".answer.active")複数の要素を返しますので、あなたはeachでループに持っています。

$('.answer').on('click', function(event) { 
 
    $(this).toggleClass("active"); 
 
    var questionid = $(".question").data("questionid"); 
 
    var query = ''; 
 
    $(".answer.active").each(function(){ 
 
    var answerid = $(this).data("answerid"); 
 
    query = query + ";" + questionid + "~" + answerid; 
 
    }); 
 
    if (query.substring(0, 1) == ';') { 
 
     query = query.substring(1); 
 
    } 
 

 
    console.log(query) 
 
});

.active { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="question" data-questionid="1">Question 1</div> 
 
<div class="answer" data-answerid="1">Answer 1</div> 
 
<div class="answer" data-answerid="2">Answer 2</div>

Answer 2

すべてのアクティブな要素を反復処理し、あなたの現在の機能は、単にクラスを切り替えてみましょうする責任がある別の関数を作成します。

$('.answer').on('click', function(event) { 
    $(this).toggleClass("active"); 
    logActives(); 
} 

function logActives(){ 
var query = ""; 
$(".answer.active").each(function(){ 
    query += $(this).data("questionid")+"~"+$(this).data("answerid")+";"; 
}); 
console.log(query);