Question

我试图在单独的复选框的基础上隐藏可视化作曲家下拉列表中的数组选项。我是JS的一个可怕的菜鸟，所以我拼凑了这个JS来隐藏选项。现在它确实有效，但只是在初始循环之后。 AKA我必须检查一次框然后取消选中它以隐藏选项。我需要的是在页面加载时默认不存在的选项。

我再一次真的“知道”我在做什么我只是有一个基本的理解。因此，任何有关提高效率的建议肯定是受欢迎的。如果还有其他需要明智的信息，请告诉我。提前感谢您的时间。

PHP for Dropdown Array

array(
                          'type'        => 'dropdown',
                          'group'       => __('Animations', 'tt_myfile'),
                          'holder'      => 'div',
                          'heading'     => __("Hover", 'tt_myfile'),
                          'description' => __('Choose your <strong>HOVER</strong> animation', 'tt_myfile'),
                          'param_name'  => "ani_hover",
                          'value'       => array(
                                '--- Please Choose Your Effect ---'     => '',
                                'Curl Bottom Left'       => 'hvr-curl-bottom-left',
                                ),
                          'save_always' => true,
                      ),

PHP For CheckBox

  array(
                            'group'              => __('Style', 'tt_myfile'),
                            'type'               => 'checkbox',
                            'heading'            => __( 'Flat Design', 'tt_myfile' ),
                            //'admin_enqueue_js' => plugins_url('js/myfile.js', __FILE__), //custom backend JS
                            'param_name'         => 'flat_design',
                            'class'              => 'flat_design',
                            'value'              => array( __( 'Check this box to use flat design.', 'tt_myfile' ) => 'yes' ),
                            ),

复选框的HTML输出

<label class="vc_checkbox-label">
<input id="flat_design-yes" class="wpb_vc_param_value flat_design checkbox" type="checkbox" name="flat_design" value="yes">
Check this box to use flat design.
</label>

JS删除/添加数组选项

jQuery.noConflict();
(function( $ ) {
var myfile_ani_array = {

bind_click: function() {

var flatDesign ='.flat_design';

$(document).on('click', flatDesign, function() {
$(this).change(function () {
var val = false;
$(this).each(function () {
    val = val || $(this).is(':checked'); // any checked box will change val to true
});
jQuery('select[name="ani_hover"] option[value="hvr-curl-bottom-left"]').toggle(val); // true=show, false=hide
});
});

}

};

$(function()
{
    myfile_ani_array.bind_click();

});

})(jQuery);

Answer 1

基于给出的信息：

Html（注意我添加了一个新的选项来显示/隐藏，因为你只有那里的那个）

<select data-option="" id="select"  class="wpb_vc_param_value wpb-input wpb-select ani_hover dropdown" name="ani_hover"><option value="" class="">--- Please Choose Your Effect ---</option> <option value="hvr-curl-bottom-left" class="hvr-curl-bottom-left">Curl Bottom Left</option>
<!-- note i am not hiding the original elem, i added a new one, obviously swop the value in the css and js to hide the value you want -->
<option value="hide-this" class="hvr-curl-bottom-left">Curl Bottom another</option>
</select>



<label class="vc_checkbox-label">
<input id="flat_design-yes" class="wpb_vc_param_value flat_design checkbox" type="checkbox" name="flat_design" value="yes" >
Check this box to use flat design.
</label>

默认情况下使用css隐藏元素（注意我的目标是元素的值，我正在使用＆＃34;隐藏 - 这个＆＃34;这个例子用来说明）

.wpb_vc_param_value [value=hide-this]{
    display: none;
}

好了，现在默认隐藏这个值，在页面加载时我们需要检查这个（你也可以用php来做）。使用jquery的一个缺点是你必须在使用之前等待jquery文件加载，使用原生js你可以删除任何滞后来隐藏元素....注意原始代码之外的地方

//on doc ready run....
jQuery(document).ready(function(){
    $= jQuery;

    //check if the check box is selected (you can manually test by adding "checked" to the html element 
    // css has the element hidden by default..(see css tab) I have set the value of the element to hide this for an example, you will prob want to modify this, its the value the code checks for. 
    if( $('#flat_design-yes:checked').val() == 'yes' ){
        $('#select > option').each(function(){
            //we are looping over each option 
            if(this.value == 'hide-this'){
                // we have the value we want..
                this.style.display = 'inherit';
            }

        });
    }

});

js fiddle（请注意，您可以通过在html中添加选中复选框并单击运行来检查其工作原理）

http://jsfiddle.net/utwowzkp/14/

函数内部的示例：

function myCustomDependencyCallback() {

    if( jQuery('#flat_design-yes:checked').val() == 'yes' ){
        jQuery('.ani_hover > option').each(function() {
            // we seem to be hiding all options except the default so if the elem has no value, run..
          if ( this.value.length > 0 && jQuery(this).css('display') == 'none') {
                 jQuery(this).css('display', 'block');
          }
        });
    }
}

更新了css：

.wpb_vc_param_value option{
    display: none;
}

.wpb_vc_param_value option:first-of-type{
    display: block;
}

https://jsfiddle.net/4dvxtgnL/5/

if( jQuery('#flat_design-yes:checked').val() == 'yes' ){
        jQuery('.ani_hover > option').each(function(){
            //we are looping over each option 

            if( this.value.match("dont-show$") ){
                // we have the value we want..
                this.style.display = 'block';
                //not sure why but display inherit no longer worked. But display block worked and was friendly with out script for hiding and showing if box is ticked on the fly.
            }

        });
}

Answer 2

添加到任何param：

'dependency' => array(
            'callback' => 'myCustomDependencyCallback',
),

然后在javascript中：

function myCustomDependencyCallback() {
   // your actions with hide/show.
   //example:
    $('.flat_design').change(function() {
       var checked = $(this).is(':checked');
       if(checked) {
          $('select[name="ani_hover"]').find('[LIST OF YOUR OPTIONS']).hide();
       } else {
         $('select[name="ani_hover"]').find('[LIST OF YOUR OPTIONS']).show();
       }
    });
}

Answer 3

好吧，我所拥有的一切似乎都应该完全正常。如果JS在点击后显示无/块时添加了元素样式，我得出结论。然后我需要一些默认的css来为初始加载。所以我把这个小金块添加到我的样式表中，似乎一切都很好。在我结束时的德德德时刻哈哈。

.vc_shortcode-param[data-param_type="dropdown"] select.wpb_vc_param_value option.hvr-curl-bottom-left {
display: none;
}

如果有人知道我所拥有的所有浏览器兼容性问题，请不要发表评论。感谢任何花时间给这个想法的人。 @David感谢你给了我一个机会。

麻烦在Visual Composer Wordpress中隐藏数组选项

3 个答案: