Question

我无法在onchange事件中修改代码。

有些作品，有些作品因此不起作用。

<script>
    $(document).on('change', '.sellkop', function() { // this is radio button
        if ($("#rs").is(':checked')) {
                 $("#text_container").after(price_option());
            };
        if ($("#rk").is(':checked')) {
               $("#price_container").remove();
               $("#licensenumber_c").css({"display": 'none'
           });
         };
    });

 $('#category_group').on('change', function() { // this is select options

    if ($(this).val() == 101) {
              $("#underKategory").css({"display": 'none'});
              $("#modelcontainer").remove();
              $(".toolimage").css({ "display": 'block'});

        $('.sellkop').on('change', function() { // this is radio button
            if ($("#rs").is(':checked')) {
                $("#licensenumber_c").css({"display": 'block'});
                $(".toolimage").css({"display": 'block' });
            } else {
                $(".toolimage").css({"display": 'none'});
            }
        });
    } else {
               $(".bilar").remove();
              $(".toolimage").css({ "display": 'none'});
    }
    if ($(this).val() == 102) {
                $(".houses_container").remove();
                $(".toolimage").css({"display": 'none'});
                $("#underKategory").css({"display": 'inline-block'});
                $("#modelcontainer").remove();
    }

    ///............many other values continue
 });
</script>

我知道有更好的方法来管理这些代码并简化它，我该怎么做？

编辑：

我想要的是：如果我选择一个选项，然后获取该选项的值，然后在此类别选项下有单选按钮，然后每个检查按钮我需要显示或删除一些数据

这是一个fiddle，当我选择买入或卖出时，从类别跳出来看我的问题，所以如果我选择类别 - ＆gt;检查购买 - ＆gt;然后选择其他。我没有得到相同的结果，就像我直接选择汽车---＆gt;买

Answer 1

注意：这是尝试修复现有的编码方式。我已经发布了一个替代答案，显示了一个使用hide / show的简单方法。

一些问题。

如果您必须嵌套处理程序，只需将它们关闭，然后再将其打开。否则你会多次添加它们，之前记录的所有内容也会激活。
您的HTML字符串无效（缺少结束</div>）
您只需使用hide()和show()代替所有css设置即可。您应该对任何特定元素样式要求使用css样式（例如，基于类）。
您需要替换特定的div，而不是继续使用after，或者逐步添加更多的html。目前我已使用html替换#text_container div。

字符串中的HTML是维护噩梦（作为缺少</div>节目的示例）。而是使用模板来避免编辑问题。我使用type="text/template"的虚拟脚本块来避免你发现的那类问题。该类型意味着浏览器只是忽略模板。

JSFiddle： http://jsfiddle.net/TrueBlueAussie/4s5rwce2/17/

HTML（带模板）

<script id="saljkop">
    <div class='sex sell' id='sellbuy' >
        <label ><input id='rs' type='radio' class='radio sellkop' value='s' name='type' checked='checked'/> Sell </label>
        <label ><input id='rk' type='radio' class='radio sellkop' value='k' name='type'/>buy</label>
    </div>
</script>
<script id="price_option">
    <div class="container" id = "price_container">
        <div>
            <label><input  class="price_option" name="price_opt" value="1" type="radio"/> Fix </label>
            <label class="css-label"><input  class="price_option" name="price_opt" value="2" type="radio"/> offer </label>
        </div>
    </div>
</script>
<script id="cars">
    <div class="cars" >
        <div id="licenscontainer" ><div id="licensenumber_c">
                <input id="licensenumber" placeholder="Registrer number" type="text" value="" />
            </div>
        </div>
    </div>
</script>
<div id="categories">
    <select name="category_group" id="category_group">
        <option value="0">choose category</option>
        <option value='101' id='cat101'>cars</option>
        <option value='102' id='cat102'>others</option>
    </select>
</div>
<div id="underKategory">sthis is subcategory</div>
<div id="toolimage1" class="toolimage">dddddd</div>
<div id="text_container" class="text_container">textttttt</div>

新的jQuery代码：

$(document).on('change', '.sellkop', function () { // this is radio button
    console.log('.sellkop change');
    if ($("#rs").is(':checked')) {
        $("#text_container").html($('#price_option').html());
    };
    if ($("#rk").is(':checked')) {
        $("#price_container").remove();
        $("#licensenumber_c").hide();
    };
});

$('#category_group').on('change', function () { // this is select options

    if ($(this).val() == 101) {
        $(".sell").remove();
        $("#categories").after($('#saljkop').html());
        $("#sellbuy").after($('#cars').html());
        $("#text_container").html($('#price_option').html());
        $("#underKategory").hide();
        $(".toolimage").show();

        $('.sellkop').off('change').on('change', function () { // this is radio button
            if ($("#rs").is(':checked')) {
                $("#licensenumber_c").show();
                $(".toolimage").show();
            } else {
                $(".toolimage").hide();
            }
        });

    } else {
        $(".cars").remove();
        $(".toolimage").hide();
    }
    if ($(this).val() == 102) {
        $(".sell").remove();
        $("#categories").after($('#saljkop').html());
        $("#text_container").html($('#price_option').html());
        $(".toolimage").hide();
        $("#underKategory").show();
    }

    ///............many other values continue
});

现在，如果您不想嵌套处理程序（推荐），只需添加到单选按钮的现有委派事件处理程序：

$(document).on('change', '.sellkop', function () { // this is radio button
    console.log('.sellkop change');
    if ($("#rs").is(':checked')) {
        $("#text_container").html($('#price_option').html());
        $("#licensenumber_c").show();
        $(".toolimage").show();
    };
    if ($("#rk").is(':checked')) {
        $("#price_container").remove();
        $("#licensenumber_c").hide();
        $(".toolimage").hide();
    };
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/4s5rwce2/20/

Answer 2

注意：这是第二个答案，希望将整体问题简化为隐藏/显示现有元素。我已经发布了第三个（！）答案，使用data-属性将其更简单地提供过滤器选择。

我正在添加第二个答案，因为这是一个完整的重写。另一个答案试图修复动态添加元素的现有方式。我现在认为这只是一种糟糕的做法。

这个基本原则是要有非常简单的HTML，所有元素都存在，只需隐藏/显示你需要的那些/然后保留选定的值：

这使用多结构有效隐藏。根据两个不同的条件显示许可证字段。

JSFiddle： http://jsfiddle.net/TrueBlueAussie/4s5rwce2/23/

Html（所有元素都存在，只是你不需要隐藏的元素）：

<div id="categories">
    <select name="category_group" id="category_group">
        <option value="0">choose category</option>
        <option value='101' id='cat101'>cars</option>
        <option value='102' id='cat102'>others</option>
    </select>
    <div class='sex sell' id='sellbuy' style="display: none">
        <label>
            <input id='rs' type='radio' class='radio sellkop' value='s' name='type' checked='checked' />Sell</label>
        <label>
            <input id='rk' type='radio' class='radio sellkop' value='k' name='type' />buy</label>
    </div>
    <div class="cars" style="display: none">
        <div id="licenscontainer">
            <div id="licensenumber_c">
                <input id="licensenumber" placeholder="Registrer number" type="text" value="" />
            </div>
        </div>
    </div>
</div>
<div id="underKategory">sthis is subcategory</div>
<div id="toolimage1" class="toolimage">dddddd</div>
<div id="text_container" class="text_container">
    <div class="container" id="price_container" style="display: none">
        <div>
            <label>
                <input class="price_option" name="price_opt" value="1" type="radio" />Fix</label>
            <label class="css-label">
                <input class="price_option" name="price_opt" value="2" type="radio" />offer</label>
        </div>
    </div>
</div>

jQuery的：

$(document).on('change', '.sellkop', function () { // this is radio button
    if ($("#rs").is(':checked')) {
        $("#price_container").show();
        $(".cars").show();
        $(".toolimage").show();
    };
    if ($("#rk").is(':checked')) {
        $("#price_container").hide();
        $(".cars").hide();
        $(".toolimage").hide();
    };
});

$('#category_group').on('change', function () { // this is select options

    if ($(this).val() == 101) {
        $(".sell").hide();
        $("#sellbuy").show();
        $(".cars").show();
        $("#underKategory").hide();
        $(".toolimage").show();
        $('#licenscontainer').show();
    } else {
        $('#licenscontainer').hide();
        $(".cars").hide();
        $(".toolimage").hide();
    }
    if ($(this).val() == 102) {
        $(".sell").hide();
        $("#sellbuy").show();
        $(".toolimage").hide();
        $("#underKategory").show();
        $(".cars").hide();
    }
    $("#price_container").toggle($("#rs").is(':checked'));
    ///............many other values continue
});

Answer 3

我之前从未使用过两个答案（更不用说三个）了，但基于所有评论，并希望保持简单，另一个解决方案是根据选择数据驱动其他项目的可见性，使用data-属性用于在选项和单选按钮上存储选择器。

JSFiddle： http://jsfiddle.net/TrueBlueAussie/4s5rwce2/28/

例如，选择的HTML变为

<select name="category_group" id="category_group">
    <option value="0">choose category</option>
    <option value='101' id='cat101' data-show="#sellbuy,.cars,.toolimage,#licenscontainer">cars</option>
    <option value='102' id='cat102' data-show="#sellbuy,#underKategory">others</option>
</select>

和这样的单选按钮：

 <input id='rs' type='radio' class='radio sellkop' value='s' name='type' checked='checked' data-show="#price_container,.cars,.toolimage"/>

代码变得非常简单，只需应用所选项目中指定的过滤器。

$(document).on('change', '.sellkop', function () { // this is radio button
    // Hide defaults
    $("#price_container,.cars,.toolimage").hide();

    // Show the items desired by the selected radio button
    $($(this).data("show")).show();
});

$('#category_group').on('change', function () { // this is select options
    // Get the various possible data options and decide what to show/hide based on those
    var $this = $(this);
    var value = $this.val();

    // Get the selected option
    var $li = $('option[value='+ value+']', $this);

    // Hide all the defaults first
    $('#licenscontainer,.cars,.toolimage,.sell,#underKategory').hide();

    // Now show any desired elements
    $($li.data('show')).show();

    // Fire change event on the radio buttons to ensure they change
    $('.sellkop:checked').trigger('change');
});

这是一个非常通用的解决方案，允许非常复杂的表单根据需要打开/关闭其他元素。您可以添加数据隐藏属性，并在需要时执行类似的操作。

在onchange jquery里面的onchange

3 个答案: