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

Posted 2023-02-24

【中文标题】在 Visual Composer Wordpress 中隐藏数组选项时遇到问题

【英文标题】：Having Trouble Hiding an array option in Visual Composer Wordpress

【发布时间】：2016-02-23 15:46:20

【问题描述】：

我试图通过单击单独的复选框来隐藏可视作曲家下拉列表中的数组选项。我是一个可怕的 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);

【参考方案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 文件加载，使用本机 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.
            

        );

【参考方案2】：

添加到任何参数：

'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();
       
    );

【讨论】：

返回错误 TypeError: window[rules.callback] is undefined window[ rules.callback ].call( this );在 /js_composer/assets/js/editors/panels.js?ver=4.8.1 第 1368 行

@sean，只是因为这个文件似乎不存在。确保您的 javascript 文件已加载。

【参考方案3】：

好吧，看来我所拥有的一切都在正常工作。我得出的结论是，一旦单击 JS 来添加元素样式以显示无/块。然后我需要一些默认的 css 来进行初始加载。所以我将这个小块添加到我的样式表中，一切似乎都运行良好。有点像 De De De 的时刻了哈哈。

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

如果有人知道我在这里的所有内容有任何浏览器兼容性问题，请不要发表评论。感谢任何花时间考虑这个问题的人。 @David 感谢您试一试。

【讨论】：

****Update***** 这似乎只工作似乎 JS 不知道在页面加载时检查了一个复选框，所以仍然需要循环以保持更改.回到绘图板。

我尝试添加$(document).ready(function () $('input.flat_design').each(function() if ($(this).is(':checked')) jQuery('select[name="ani_hover"] option[value="hvr-curl-bottom-left"]').css('display', 'block'); ); ); 来检查它是否在加载时检查并且没有运气.....它可以在萤火虫的控制台中运行哈哈，但其他所有内容也是如此。似乎无论我尝试什么，这都无法识别与页面初始加载上的复选框相关的任何 JS