Question

之前我问过这个问题， HOWEVER ;我现在能够为标签单选按钮分配名称或ID。我之前无法做到这一点，这让事情搞得一团糟。各种各样的人试图帮忙，但我把事情弄得一团糟（对不起）。

WHMCS的问题在于，当您在盒子外面思考时，编辑内容非常有限。

单选按钮/标签如下所述：

<label id="{$options.nameonly}" name="{$options.nameonly}" >
    <input type="radio" name="configoption[{$configoption.id}]" value="{$options.id}"{if $configoption.selectedvalue eq $options.id} checked="checked"{/if} />
    {if $options.name}
    {$options.name}
    {else}
    {$LANG.enable}
    {/if}
</label>

忽略我使用相同ID和名称两次的事实。这只是为了表明我可以将它们命名为两者（之前并非如此）。我将删除其中一个，具体取决于最适合这种情况。

该变量名为{$ options.nameonly}，可以是我通过WHMCS添加的各种内容。

让我们说{$ options.nameonly}包含3个可能的选项（单选按钮）：

根本没有备份
使用专业备份进行每周备份
使用专业备份进行每月备份

在这种情况下，标签ID /名称显然是上述之一。

现在我想基于以上3种选择中的任何一种显示DIV：

 - <div id="weeklymsg">Weekly backup information</div>
 - <div id="monthlymsg">Monthly backup information</div>
 - And don't show a DIV when 'No backups at all' option is selected

我尝试了几项工作，但是我能做到的最好的事情就是让DIV出现，但不会消失。

我希望在我的情况下使用类似的东西：

$("label[name='Weekly backups with professional backup']").click(function(){
    $('input[type=radio]').parent().next('div').hide();
    if ($(this).is(':checked'))
    {
      var value = $(this).val();
        $('#'+value).fadeIn();
    }
    else
    {
        var value = $(this).val();
        $('#'+value).fadeOut();
    }
});

如果您知道更好的解决方案或更好的主意，请分享。

我也不知道一般情况有什么好处;定位标签ID或标签名称？或者这不重要吗？

如果您需要更多信息或详细信息，请告诉我们。我已经意识到你还在读这个。：）

旁注;如果您还没注意到，ID /名称之间会有空格，例如：“每周备份与专业备份”

更新：添加了一个简单的JSFiddle here。

-------------------------------------------- ------------- UPDATE ------------------------------------ -----------------------

好的，据我所知，问题是由“iradio_square-blue”引起的。无论出于何种原因，这使得DIV在选择选项时不会出现。

我使用textcrawler搜索了所有文件，发现它也在.js文件中（两次）。

第一个场合就在这里：

jQuery('input').iCheck({
    inheritID: true,
    checkboxClass: 'icheckbox_square-blue',
    radioClass: 'iradio_square-blue',
    increaseArea: '20%'
});

第二个问题在这里：

jQuery.post("cart.php", 'a=cyclechange&ajax=1&i='+i+'&billingcycle='+billingCycle,
    function(data) {
        jQuery("#productConfigurableOptions").html(jQuery(data).find('#productConfigurableOptions').html());
        jQuery('input').iCheck({
            inheritID: true,
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%'
        });
    }
);

.css文件中也有一些与“iradio_square-blue”相关的点击，但我不认为这些会导致问题。但我确实认为.js中的上述两个条目导致了DIV的问题？

添加说明： 我现在很确定，base.js中的这两个部分导致了问题，因为当我删除它们（用于测试）时，它可以工作100％。它显示并隐藏了DIV。所以任何人都知道这个的解决方法......？

Answer 1

我希望这能解决你的问题..

$("#weeklymsg").hide();
$("#monthlymsg").hide();
$(".form-group input[type='radio']").on("change", function (e) {
    if($(e.target).closest("label")[0].id == "Monthly backups with professional backup"){
    $("#weeklymsg").hide();
            $("#monthlymsg").show();
    }else if($(e.target).closest("label")[0].id == "Weekly backups with professional backup"){
    $("#weeklymsg").show();
            $("#monthlymsg").hide();
    }else{
          $("#weeklymsg").hide();
            $("#monthlymsg").hide();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="col-sm-12">
        <div class="form-group">
            <label for="inputConfigOption14"></label>

            <div>
                <label for="inputConfigOption14">What kind of backups</label>
            </div><label class="" id="No backups at all"></label>

            <div class="iradio_square-blue" style=" position: relative;">
                <label class="" id="No backups at all"><input name=
                "configoption[14]" type="radio" value="43"></label>No backups
                at all
            </div><label id="Weekly backups with professional backup"></label>

            <div class="iradio_square-blue" style="position: relative;">
                <label id=
                "Weekly backups with professional backup"><input name="configoption[14]"
                type="radio" value="43 "></label>Weekly backups with
                professional backup
            </div><label class="" id=
            "Monthly backups with professional backup"></label>

            <div class="iradio_square-blue" style="style=">
                <label class="" id=
                "Monthly backups with professional backup"><input name=
                "configoption[14]" type="radio" value="43 "></label>Monthly
                backups with professional backup
            </div>
        </div>
    </div><br>
    <br>

    <div id="weeklymsg">
        Weekly backup information
    </div>

    <div id="monthlymsg">
        Monthly backup information
    </div>

Answer 2

Pure Javascript，我希望这可以解决您使用WHMCS和jQuery的问题..

＆＃13;

document.getElementById("weeklymsg").style.display = "none";
document.getElementById("monthlymsg").style.display = "none";

var p = document.querySelectorAll(".form-group input[type='radio']");
for (var i = 0; i < p.length; i++) {
    p[i].onclick = function (e) {
        var closestStr = closest(e.target, "label").id;
        if (closestStr == "Monthly backups with professional backup") {
            document.getElementById("weeklymsg").style.display = "none";
            document.getElementById("monthlymsg").style.display = "block";
        } else if (closestStr == "Weekly backups with professional backup") {
            document.getElementById("weeklymsg").style.display = "block";
            document.getElementById("monthlymsg").style.display = "none";

        } else {
            document.getElementById("weeklymsg").style.display = "none";
            document.getElementById("monthlymsg").style.display = "none";
        }
    }
}

function closest(el, selector) {
    var matchesFn;
    // find vendor prefix
    ['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector', 'oMatchesSelector'].some(function (fn) {
        if (typeof document.body[fn] == 'function') {
            matchesFn = fn;
            return true;
        }
        return false;
    });

    // traverse parents
    while (el !== null) {
        parent = el.parentElement;
        if (parent !== null && parent[matchesFn](selector)) {
            return parent;
        }
        el = parent;
    }

    return null;
}

＆＃13;

<div class="col-sm-12">
        <div class="form-group">
            <label for="inputConfigOption14"></label>

            <div>
                <label for="inputConfigOption14">What kind of backups</label>
            </div><label class="" id="No backups at all"></label>

            <div class="iradio_square-blue" style=" position: relative;">
                <label class="" id="No backups at all"><input name=
                "configoption[14]" type="radio" value="43"></label>No backups
                at all
            </div><label id="Weekly backups with professional backup"></label>

            <div class="iradio_square-blue" style="position: relative;">
                <label id=
                "Weekly backups with professional backup"><input name="configoption[14]"
                type="radio" value="43 "></label>Weekly backups with
                professional backup
            </div><label class="" id=
            "Monthly backups with professional backup"></label>

            <div class="iradio_square-blue" style="style=">
                <label class="" id=
                "Monthly backups with professional backup"><input name=
                "configoption[14]" type="radio" value="43 "></label>Monthly
                backups with professional backup
            </div>
        </div>
    </div><br>
    <br>

    <div id="weeklymsg">
        Weekly backup information
    </div>

    <div id="monthlymsg">
        Monthly backup information
    </div>

＆＃13;

使用jQuery

2 个答案: