Question

我有一个带有单选按钮的字段：隐藏和显示，我想在选择隐藏时隐藏下面的所有字段并在选择显示时显示所有字段。以下是我的代码：

<div id="product-options-wrapper" class="product-options">
        <dd>
            <div class="input-box display">
                <ul class="options-list">
                    <li>
                        <input class="radio product-custom-option" type="radio" checked="checked"><label for="options_6032_2">Show</label>
                    </li>
                    <li>
                        <input class="radio product-custom-option" type="radio"><label for="options_6032_3">Hide</label>
                    </li>
                </ul>
            </div>
        </dd>

        <dd>
            <div class="input-box fontclass">
                <select>
                    <option>Arial </option>
                    <option>Lato </option>
                    <option>Disney Print </option>
                </select>
            </div>
        </dd>

        <dd>
            <div class="input-box">
                <input id="mirror" type="text" value="">
            </div>
        </dd>

        <dd class="last">
            <div class="colorclass">
                <select>
                    <option>red </option>
                    <option>black </option>
                </select>
            </div>
        </dd>
</div>

更新：

单选按钮没有固定的ID或类，单选按钮中唯一稳定的是文本。

更新

我几乎在那里我使用div：包含函数和兄弟姐妹，函数是隐藏的工作，但我不知道为什么不能再显示工作。这是jquery：

 jQuery('div:contains("Hide ")').on('click', function(){
   jQuery(this).closest('dd').siblings().hide();
});
 jQuery('div:contains("Show ")').on('click', function(){
   jQuery(this).closest('dd').siblings().show();
});

这是我的HTML：

<li>
<input id="options_6032_2" class="radio validate-one-required-by-name product-custom-option" type="radio" price="0" value="42978" name="options[6032]" onclick="opConfig.reloadPrice()" checked="checked">
<span class="label">
<label for="options_6032_2">Hide </label>
</span>
</li>
<li>
<input id="options_6032_3" class="radio validate-one-required-by-name product-custom-option" type="radio" price="100" value="42979" name="options[6032]" onclick="opConfig.reloadPrice()">
<span class="label">
<label for="options_6032_3">
Show
<span class="price-notice">
+
<span class="price">Dkr100.00</span>
</span>
</label>
</span>
</li>

更新：

也许这会有所帮助，这段代码是生成这个无线电选项的php代码：

    $selectHtml = '<ul id="options-'.$_option->getId().'-list" class="options-list">';
    $require = ($_option->getIsRequire()) ? ' validate-one-required-by-name' : '';
    $arraySign = '';
    switch ($_option->getType()) {
        case Mage_Catalog_Model_Product_Option::OPTION_TYPE_RADIO:
            $type = 'radio';
            $class = 'radio';
            if (!$_option->getIsRequire()) {
                $selectHtml .= '<li><input type="radio" id="mylabel options_' . $_option->getId() . '" class="'
                    . $class . ' product-custom-option" name="options[' . $_option->getId() . ']"'
                    . ($this->getSkipJsReloadPrice() ? '' : ' onclick="opConfig.reloadPrice()"')
                    . ' value="" checked="checked" /><span class="label"><label for="options_'
                    . $_option->getId() . '">' . $this->__('None') . '</label></span></li>';
            }
            break;
        case Mage_Catalog_Model_Product_Option::OPTION_TYPE_CHECKBOX:
            $type = 'checkbox';
            $class = 'checkbox';
            $arraySign = '[]';
            break;
    }

Answer 1

使用jQuery / JavaScript隐藏和显示元素非常简单。在要隐藏的元素中添加一个类（在下面的示例中，我将其命名为hidden），然后使用hide和show函数，如下所示：

$('#options_6032_3').click(function() {
  $('.hidden').hide();
})
$('#options_6032_2').click(function() {
  $('.hidden').show();
})

查看此jsfiddle以查看其工作原理。

修改

根据您在此答案的评论中提供的示例，此替代方案应该有效：

var hideRadio = $('li:nth-child(2) input:radio'); var showRadio = $('li:first input:radio'); hideRadio.click(function() { $(this).closest('dd').siblings(':nth-child(3)').hide(); $(this).closest('dd').siblings(':nth-child(4)').hide(); }) showRadio.click(function() { $(this).closest('dd').siblings(':nth-child(3)').show(); $(this).closest('dd').siblings(':nth-child(4)').show(); })

查看此jsfiddle以查看其工作原理。

注意：您每次都需要以相同的格式生成动态创建的HTML代码（使用最新代码包含的dd和dt代码。

Answer 2

ROLE_REPORT,ROLE_SETTING,ROLE_CUSTOMER

Answer 3

为什么不将类fields添加到要隐藏的<dd>并使用jQuery或类似内容隐藏<dd>。您可能还需要单选按钮等类或标识符的标识符。然后你可以用这种方式隐藏fields。

$(".show").change(function() {
  if(this.checked) {
      $(".fields").show();
  }
});

$(".hide").change(function() {
  if(this.checked) {
      $(".fields").hide();
  }
});

这是一个工作小提琴：https://jsfiddle.net/28nboav9/

这与你在哪里寻找相似吗？

Answer 4

将你的html代码包装在需要显示/隐藏的div中，以便更好地进行代码优化

HTML

  <div id="product-options-wrapper" class="product-options">
                <dd>
                    <div class="input-box display">
                        <ul id="options-6032-list" class="options-list">
                            <li>
                                <input id="options_6032_2" class="radio validate-one-required-by-name product-custom-option" type="radio" value="42978" name="options[6032]" onclick="opConfig.reloadPrice()" checked="checked"><label for="options_6032_2">Show </label>
                            </li>
                            <li>
                                <input id="options_6032_3" class="radio validate-one-required-by-name product-custom-option" type="radio" value="42979" name="options[6032]" onclick="opConfig.reloadPrice()"><label for="options_6032_3">Hide</label>
                            </li>
                        </ul>
                    </div>
                </dd>
        <div id="toggleVisibility">  //wrapped inside div
                <dd>
                    <div class="input-box fontclass">
                        <select id="select_6031" class="required-entry product-custom-option form-control" onchange="opConfig.reloadPrice()" title="" name="options[6031]">
                            <option price="0" value="42969">Arial </option>
                            <option price="0" value="42970">Lato </option>
                            <option price="0" value="42971">Disney Print </option>
                        </select>
                    </div>
                </dd>

                <dd>
                    <div class="input-box">
                        <input id="options_6030_text mirror" class="input-text required-entry validate-length maximum-length-25 product-custom-option form-control" type="text" value="" name="options[6030]" onchange="opConfig.reloadPrice()">
                    </div>
                </dd>

                <dd class="last">
                    <div class="input-box colorclass">
                        <select id="select_6028" class="required-entry product-custom-option form-control" onchange="opConfig.reloadPrice()" title="" name="options[6028]">
                            <option price="0" value="42965">red </option>
                            <option price="0" value="42966">black </option>
                        </select>
                    </div>
                </dd>
    </div>
        </div>

请将此脚本添加到您的页面/ js文件

中

Jquery

$(document).ready(function () {
    var $div=$('#toggleVisibility');
    $('#options_6032_2').click(function () {
        if ($(this).is(':checked')) {
            $div.show();
        }
    })
    $('#options_6032_3').click(function () {
        if ($(this).is(':checked')) {
           $div.show();
        }
    })
});

Answer 5

尝试这样的事情。它找到了收音机的父DD并隐藏了它的所有兄弟姐妹：

$('#options_6032_2').on('click', function(){
   $(this).closest('dd').siblings().show();
});
$('#options_6032_3').on('click', function(){
   $(this).closest('dd').siblings().hide();
});

这取决于你的收音机是如何动态建立起来的。您可能希望为选择器指定一个特定的类。

另见小提琴：https://jsfiddle.net/cp5ses3y/

Answer 6

这应该有效

opConfig.reloadPrice = function(show){
    if(show){
        $('#select_6028,#options_6030_text,#select_6031').show();
    }else{
        $('#select_6028,#options_6030_text,#select_6031').hide();
    }    
}

您可以更改选择器以隐藏/显示您想要的任何内容。我认为最好的方法是在你要隐藏/显示的所有字段中添加一个类，这样你就只能$('.classToHideShow').show()

以下是修改后的代码：https://jsfiddle.net/55mrk3xf/

Answer 7

$("#hide").click(function() {
  $('div.fontclass').hide();
  $('div').children('#mirror').hide();
  $('div.colorclass').hide();
});

$("#show").click(function() {
  $('div.fontclass').show();
  $('div').children('#mirror').show();
  $('div.colorclass').show();
});

试试这个。它使用JQuery和相对选择器的组合来实现您想要的效果。小提琴：https://jsfiddle.net/ut6jc4vp

单选按钮隐藏/显示所有内容

7 个答案: