Question

<div class="actions_container" id="message_form_container"> ...<input type="text" id="message" />... </div>
<div class="actions_container" id="coffee_form_container"> ...<input type="text" id="coffee_message" />... </div>
<div class="actions_container" id="network_form_container"> ...<input type="text" id="network_message" />... </div>   

    <select name="dropdown" id="select_action">

    <option value="message"> OPTION 1 </option>
    <option value="coffee"> OPTION 2 </option>
    <option value="network"> OPTION 3 </option>

    </select>

jQuery的：

 $j('#select_action').bind('change', function(e) { 

        var current_val = $j('#select_action').val();


            //console.log("TESTING DROPDOWN CHANGE | BBBBB");
        if (current_val == 'message') {

            $j('.actions_container').slideUp('fast', function() {
            $j('#message_form_container').slideDown('slow', function() {

                    $j('#message_container_m2').slideUp('fast', function() {
                    $j('#message_container_m1 #message').val('');   
                    $j('#message_container_m1').slideDown('slow');

                    });
                });
            });
        } else if(current_val == 'coffee') {
            $j('.actions_container').slideUp('fast', function() {
            $j('#coffee_form_container').slideDown('slow', function() {

                    $j('#message_container_c2').slideUp('fast', function() {
                    $j('#message_container_c1 #coffee_message').val('');    
                    $j('#message_container_c1').slideDown('slow');

                    });
                });
            });
        } else if(current_val == 'network') {

            $j('.actions_container').slideUp('fast', function() {
            $j('#network_form_container').slideDown('slow', function() {

                    $j('#message_container_n2').slideUp('fast', function() {
                    $j('#message_container_n1 #network_message').val('');   
                    //$j('#message_container_n1').slideDown('slow');

                    });
                });
            });
        }


    });

这里的熟练工。

最后一种情况，如果current_val == add_to_network ..使#network_form_container向下滑动两次。一旦它发生在第三个也发生在第二个..直到我选择第一个选项..然后第二个开始正常表现。

还希望看到你如何更有效地写这个，没有什么高水平。

Answer 1

您提供的信息不足以提供完整的解决方案，但请尝试类似

的内容

<div class="actions_container" id="message_form_container">...
    <input type="text" class="message" id="message" />...</div>
<div class="actions_container" id="coffee_form_container">...
    <input type="text" class="message" id="coffee_message" />...</div>
<div class="actions_container" id="network_form_container">...
    <input type="text" class="message" id="network_message" />...</div>
<select name="dropdown" id="select_action">
    <option value="message" data-target="#message_form_container">OPTION 1</option>
    <option value="coffee" data-target="#coffee_form_container">OPTION 2</option>
    <option value="network" data-target="#network_form_container">OPTION 3</option>
</select>

然后

var $cts = $j('.actions_container');
$j('#select_action').bind('change', function (e) {

    var current_val = $j('#select_action').val(),
        $selected = $(this).find('option:selected'),
        $target = $($selected.data('target')),
        $visible = $cts.filter(':visible');

    if ($visible.length) {
        $cts.filter(':visible').slideUp('fast').promise().done(function () {
            $target.slideDown('slow', function () {
                $target.find('input.message').val('')
            });
        })
    } else {
        $target.slideDown('slow', function () {
            $target.find('input.message').val('')
        });
    }
});

演示：Fiddle

最后一个回调函数表现得很奇怪

1 个答案: