Question

我的网站上有很多问题。当您单击问题时，您会得到答案。我的代码看起来像这样：

$(document).on('click','#panel1question1',function(){
    if (oneone % 2 == 0) {
        $(this).html(answerarraylvl1_js[2]);
        oneone++;
        console.log(oneone);}
        else {
        $(this).html(questionarraylvl1_js[2]);
        oneone++;
        console.log(oneone);
        }

});

问题是我最多可以显示75个问题。

我不想为每个div元素复制并粘贴一个代码段。它会生成一个庞大的文件。我也不希望每个问题都有一个切换变量。我最终会遇到很多变量。

但是，我确实有命名约定。有没有办法说：是否为panelxquestiony编写此代码并指定x和y？

编辑：更多细节。该代码应在此站点上运行（http://ticktockmaths.co.uk/ticktockquestions/index.php?id=1&sid=5->练习问题）。用户（从数组中）收到一些问题，他们可以单击（从数组中）查看答案。

用户将能够在屏幕上添加问题（最多约20个）。

我希望每个问题都有一个点击监听器。因此，下一个问题将需要以下代码。

$(document).on('click','#panel1question2',function(){
    if (oneone % 2 == 0) {
        $(this).html('<strong>2. </strong>' + answerarraylvl1_js[3]);
        oneone++;
        console.log(oneone);}
        else {
        $(this).html('<strong>2. </strong>' + questionarraylvl1_js[3]);
        oneone++;
        console.log(oneone);
        }

});

我想知道我是否可以做

$(document).on('click','#panel1questionN',function(){
    if (oneone % 2 == 0) {
        $(this).html('<strong>N. </strong>' + answerarraylvl1_js[N+1]);
        NN++;
        console.log(NN);}
        else {
        $(this).html('<strong>N. </strong>' + questionarraylvl1_js[N+1]);
        NN++;
        console.log(NN);
        }

});

对于N，其中N是用户提出的问题数量

Answer 1

尽管您确实需要以某种方式将问题的id存储在问题元素中（编辑：或在点击处理程序中确定问题），但使用大量带有运行编号的ID却是浪费。

这里是示例代码，其中id和当前状态存储在问题元素的数据集中。单击问题元素时，单个处理程序函数将读取状态和索引，更改状态，然后相应地设置文本：

const questionarraylvl1_js = ["Question 1", "Question 2", "Question 3"];
const answerarraylvl1_js = ["Answer 1", "Answer 2", "Answer 3"];

// add click handler
$(document).on("click", "#questions span", function () {
  // question index
  var i = $(this).data("index");
  // question? (or answer?)
  var is_q = $(this).data("is_q");
  // change it
  is_q = !is_q;
  // set new text
  $(this).html(is_q ? questionarraylvl1_js[i] : answerarraylvl1_js[i]).data({ is_q });
});

// build question HTML
questionarraylvl1_js.forEach((q, i) => {
  // store index and id in element
  var $q = $("<span>").text(q).data({ index: i, is_q: true });
  $(questions).append($("<p>").append($("<strong>").text(i + 1 + ". ")).append($q));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="questions"></div>

Answer 2

您可以简单地使用for循环：

for(let i=0; i<questions.length; i++){
  $(this).html(questions[i]+answers[i])
}

在这里，我假设问题和答案是分别包含问题和答案的html元素数组。

但是，由于帖子中的查询不足，我们不知道此答案是否可以满足您的问题。但我希望，至少对您提前有所帮助。

根据您的更新，我可以认为您想要实现以下目标：

$(document).on('click','.panel1questionN',function(){
 // giving a common class ^^ instead
   var NN = $(this).index(); // if you have parent element
   // var NN = $(this).index(this); // if buttons are anywhere
   // but be sure this class only exists for such buttons only
    if (oneone % 2 == 0) {
        $(this).html('<strong>' + NN + '</strong>' + answerarraylvl1_js[NN+1]);
        NN++;
        console.log(NN);}
        else {
        $(this).html('<strong>' + NN + '</strong>' + questionarraylvl1_js[NN+1]);
        NN++;
        console.log(NN);
        }

});

但是我仍然不确定是否要实现这样的目标。请让我们知道是否需要进一步的帮助。

Answer 3

因此，请使用数据属性确定单击的内容。然后，您可以使用该属性来获取数字。

consecutive_comp_convolve(arr1, comp=3, N=4, comparison=np.greater_equal)
consecutive_comp_erosion(arr1, comp=3, N=4, comparison=np.greater_equal)
consecutive_comp_convolve(arr2, comp=3, N=4, comparison=np.greater_equal)
consecutive_comp_erosion(arr2, comp=3, N=4, comparison=np.greater_equal)

$(document).on('click','[data-num]',function (){
  var button = $(this);
  var num = +button.data("num")
  console.log(num)
  button.text(num)
});

Answer 4

进行两个委托事件绑定，并切换一个类以控制哪个类执行。

$(document).on('click','#panel1question1:not(.answer)',function(){
  $(this).addClass('answer').html(answerarraylvl1_js[2]);
});

$(document).on('click','#panel1question1.answer',function(){
  $(this).removeClass('answer').html(questionarraylvl1_js[2]);
});

避免重复的onclick语句

4 个答案: