php - 在 Visual Composer Wordpress 中隐藏数组选项时遇到问题

Question

我试图通过单击单独的复选框来隐藏可视化编辑器下拉列表中的数组选项。我是 JS 的菜鸟，所以我拼凑了这个 JS 来隐藏选项。现在它确实有效，但只有在初始循环之后。 AKA 我必须选中该框一次然后取消选中它以隐藏该选项。我需要的是在加载页面时默认情况下不存在该选项。

再说一次，我实际上并不真正“知道”我在做什么，我只是有一个基本的了解。因此，当然欢迎任何有关提高效率的建议。如果需要任何其他明智的信息，请告诉我。提前感谢您的宝贵时间。

用于下拉数组的 PHP

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

  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 隐藏元素(注意我针对的是元素的值，我在这个例子中使用“hide-this”来说明)

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

好的，现在该值将默认隐藏，在页面加载时我们需要对此进行检查(您也可以使用 php 执行此操作)。使用 jquery 的一个缺点是您必须在使用前等待 jquery 文件加载，使用 native 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.
            }

        });
}