Question

使用print_media_templates我在wordpress图库创建器中添加了一些设置，允许我根据其他短代码参数选择图库短代码输出（默认图库，砖石，滑块）。

到目前为止我的代码：

<?php

add_action('print_media_templates', function(){ ?>

<script type="text/html" id="tmpl-custom-gallery-setting">

    <label class="setting">
        <span>Gallery Type</span>
        <select name="type" data-setting="type" onchange="getval(this);">
            <option value="default">Default</option>
            <option value="masonry">Masonry</option>
            <option value="slider">Slider</option>
        </select>
    </label>

<div id="slider-settings">
    <label class="setting">
        <span>Animation</span>
        <select id="gallery-type" name="animation" data-settings="animation">
            <option value=""></option>
            <option value="fade">Fade</option>
            <option value="slide">Slide</option>
        </select>
    </label>
</div>

</script>

<script>

    jQuery(document).ready(function() {

        wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
        template: function(view){
          return wp.media.template('gallery-settings')(view)
               + wp.media.template('custom-gallery-setting')(view);
        }
        });
    });

</script>

<?php

});

?>

这只是一个很小的部分，因为每种图库类型都有更多选项。由于有很多选项，我想只显示一个对应于所选图库类型的选项。在此示例中，我只想在＃gallery-type select value ==“slider”时显示#slig-settings。

至于检查选择值，我找到了这段代码：

<script>
    function getval(sel) {
        if (sel.value == "slider") {
          alert(sel.value);
        }
    }
</script>

返回选择的类型值（以及＃gallery-type选择的onchange =“”），如果设置为“slider”，则显示它。

但是当我想要隐藏＃slider-settings之类的时候：

function getval(sel) {
    if (sel.value != "slider") {
        $('#slider-settings').hide();
    }
}

它根本没有隐藏。

Answer 1

您必须处理本机更新功能。进行单个更改时，将为每个标签触发更新功能。（media-views.js第7232行）

var oldUpdate = wp.media.view.Settings.Gallery.prototype.update;

wp.media.view.Settings.Gallery.prototype.update = function(key) {

    if( key === "type" ) {
        var value = this.model.get( key );
        if ( value === "slider" ) {
            setTimeout(function(){
                jQuery("#slider-settings").css({"display":"block"});
            });
        } else {
            setTimeout(function(){
                jQuery("#slider-settings").css({"display":"none"});
            });
        }
    }
    // Initialize native code.
    oldUpdate.apply(this, arguments);
};

Answer 2

不知怎的，我设法通过使用非jQuery而不是javascript隐藏＃slider-settings来实现它的工作：

<script>

    function getval(sel) {
        if (sel.value != "slider") {
          document.getElementById('slider-settings').style.display = 'none'; 
        } else {
          document.getElementById('slider-settings').style.display = 'block'; 
        }
    }

</script>

但要获得价值，它必须改变（因为它是onselect =）所以第一次显示设置时它不会隐藏。而且当我搜索时，似乎没有任何像onload =我可以使用的。

或者有没有办法在加载时重新选择它？

Wordpress自定义图库设置 - 条件显示

2 个答案: