如何使用一个函数而不是多个只改变它的 div 值？

Posted 2023-05-09

【中文标题】如何使用一个函数而不是多个只改变它的 div 值？

【英文标题】：How to use one function instead of many only changing the div values of it?

【发布时间】：2016-11-16 01:36:24

【问题描述】：

我正在尝试使用动态问题进行提问。应用程序应该给出一些问题，当问题得到回答时，会出现“下一个”按钮，根据您的回答，您会得到下一个问题。

基本想法是制作一个故障排除工具，客户可以在其中回答问题并最终获得可能出现问题的建议。

为了简单易懂，我已经简化了问题。

我已经设法让它工作，但问题是对于每个问题，我必须编写一个单独的函数，只有不同的值。

所以我想知道是否有一种方法可以使这项工作仅使用一个函数，其中值可以是动态的，并且跳过复制粘贴相同的代码并更改它的值。所有的值都有一个短名称和数字，所以也许可以减去或增加它们？在那种情况下，如何在一个功能而不是多个功能中做到这一点。

我的jquery原函数：

   $("input[name='group1']").click(function ()     
    $("#next").show();
);

$("#next").click(function ()   
    if ($("input[name='group1']:checked").val() == 'opt1') 
        $('div:not(#q1)').hide();
        $("#q1").fadeIn(1000);

     else if ($("input[name='group1']:checked").val() == 'opt2') 
        $("#q0").hide();
        $("#q2").fadeIn(1000);
     


);

完整的例子可以在 JSFiddle 中看到：

JSFiddle

提前致谢。

编辑：

读了几次之后，我想出了一个主意。 是否可以收集输入名称，输入值和段落id，然后将其保存为js文件中的变量？

【参考方案1】：

您可以为每个单选按钮添加一个属性以准确了解数字。检查值更容易。

完成此操作后，您可以创建一个计数器并在每次#nextclick 时将其递增。

html：

<div id="q2" style="display:none;">
    <h2>Are you good on Call of duty ?</h2>
    <label>
        <input type="radio" name="group3" id="rdio5" question="5" value="opt5">Yes</label>
    <label>
        <input type="radio" name="group3" id="rdio6" question="6" value="opt6">No</label>
    <br>
    <p class="next" id="next2" style="display:none;">Next</p>
</div>

JS：

var c = 1;
$("#next").click(function() 
  if ($("input[name='group1']:checked").attr('question') == c) 
    $('div:not(#q1)').hide();
    $("#q1").fadeIn(1000);

   else if ($("input[name='group1']:checked").attr('question') == c+1) 
    $("#q" + c-1).hide();
    $("#q" + c).fadeIn(1000);
  
c++
);