使用 IF 重复代码

Question

我的按钮上的文本在单击单选按钮时会发生变化。但是当我单击按钮两次时，文本不再出现。当我多次单击单选按钮时，我想要一些循环/重复代码，按钮上的文本总是出现。有什么帮助吗？

HTML

<nav class="navbar2 navbar-expand-sm navbar-dark fixed-bottom">
        <div id="navbarbackground" class="container-fluid">
            <div class="navbar" id="nav-content">
                <label class="labl icon-package-flat">
                    <input type="radio" onclick="window.location='#formulario';" id="radioInfo" name="radioname" value="Submeter pedido de Informação geral" checked="checked" />
                    <div class="text"><center class="iconcenter"><i class="icon icon-info"></i></center>Informação geral</div>
                </label>
                <label class="labl icon-package-flat">
                    <a href="#formulario"></a>
                    <input type="radio" onclick="window.location='#formulario';" id="radioTestDrive" name="radioname" value="Submeter pedido de Test drive" />
                    <div class="text"><center class="iconcenter2"><i class="icon icon-test_drive"></i></center>Test drive</div>
                </label>
                <label class="labl icon-package-flat">
                    <input type="radio" onclick="window.location='#formulario';" id="radioFinancing" name="radioname" value="Submeter pedido de Financiamento" />
                    <div class="text"><center class="iconcenter2"><i class="icon icon-calculator"></i></center>Financiamento</div>
                </label>
                <label class="labl icon-package-flat">
                    <input type="radio" onclick="window.location='#formulario';" id="radioCatalog" name="radioname" value="Submeter pedido de Catálogo" />
                    <div class="text"><center class="iconcenter2"><i class="icon icon-printed"></i></center>Catálogo</div>
                </label>
            </div>
        </div>
    </nav>

HTML 按钮

<div class="container-contact100-form-btn">
<center> <section class="icon-package-flat"> <button  id="btnsubmeter" class="contact100-form-btn"><i class="icon icon-arrow" aria-hidden="true"></i>
<span id="lblOpcao">Submeter pedido de informação geral</span></button>
</section></center> </div>

Javascript

 $("[name='radioname']").click(function () {
            $(this).parent().find('.radio').removeClass('selected');
            $(this).addClass('selected');

            var val = $(this).attr('data-value');

            if ($(this).id == "radioInfo") {
                $("#lblOpcao").text("Submeter pedido de Informação geral");
            }

            if ($(this).id == "radioFinancing") {
                $("#lblOpcao").text("Submeter pedido de financiamento");
            }

            if ($(this).id == "radioTestDrive") {
                $("#lblOpcao").text("Submeter pedido de Test drive");
            }

            if ($(this).id == "radioCatalog") {
                $("#lblOpcao").text("Submeter pedido de Catálogo");
            }

            $("#lblOpcao").text($(this).val());
            //alert(val);
            $(this).parent().find('input').val(val);        
        });

        function toggle(button) { if (radio.value == "OFF") { radio.value = "ON"; } else { radio.value = "OFF"; } }

谢谢！

Answer 1

您从$(this).attr('data-value') 获得value，它不会返回您想要的。然后再次将其设置为该值。它正在清除单选按钮的值。

您也不需要在单选按钮值和 JS 代码中指定它的文本。这是模棱两可的，可能会导致维护问题。

---

糟糕的解决方案

您只需更改该行即可使其工作：

发件人：
var val = $(this).attr('data-value');
致：
var val = $(this).val();

---

建议的解决方案

尝试将整个 .click() 事件替换为：

    $("[name='radioname']").click(function () {
        $(this).parent().find('.radio').removeClass('selected');
        $(this).addClass('selected');
        $("#lblOpcao").text($(this).val());  
    });

我删除了一些无用的逻辑。您正在检查单选按钮 id 以在 lblOpcao 上设置特定文本，但您没有使用它。您总是用 .val() 文本覆盖它。您还将单选按钮的值设置为相同的值。