javascript - 使用 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() 文本覆盖它。您还将单选按钮值设置为相同的值。