Question

我已经使用JQuery设置了选择项的样式，JQuery将这些项输出到无序列表中。可以了我使用了一些JavaScript在无序列表上创建无限滚动效果。无限滚动基本上重复了整个列表，从而得到两组相同的列表项。但是，克隆集列表项不可单击，因此单击克隆列表项时表单不会呈现任何结果。

链接到所选择的内容（尝试“情感品质选择”）-http://dev.chrislamdesign.com/shortwave/sample-page/

链接到codepen无限滚动-https://codepen.io/doctorlam/pen/oKgRvO

这是我的PHP

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
    <div class="container d-flex justify-content-between">
        <div class="row" style="width: 100%">
    <?php
    if( $terms = get_terms( array('hide_empty' => false,'taxonomy' => 'emotional_quality', 'orderby' => 'name' ) ) ) : ?>
        <div id="emotional" class="col-md-4">
        <?php
            echo '<select class="form-submit" name="categoryfilter2"><option value="">Emotional Quality</option>';
            foreach ( $terms as $term ) :
                echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as the value of an option
            endforeach;
            echo '</select>'; ?>
        </div>
        <?php endif; 

        if( $terms = get_terms( array( 'hide_empty' => false,'taxonomy' => 'genre', 'orderby' => 'name' ) ) ) : ?>
            <div id="genre" class="col-md-4">

            <?php echo '<select class= "form-submit" name="categoryfilter"><option value="">Select genre...</option>';
            foreach ( $terms as $term ) :
                echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as the value of an option
            endforeach;
            echo '</select>'; ?>
        </div>
        <?php endif;

        if( $terms = get_terms( array( 'hide_empty' => false,'taxonomy' => 'cinematic_style', 'orderby' => 'name' ) ) ) : ?>
            <div id="cinematic" class="col-md-4">

            <?php echo '<select class="form-submit" name="categoryfilter3"><option value="">Cinematic Style</option>';
            foreach ( $terms as $term ) :
                echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as the value of an option
            endforeach;
            echo '</select>'; ?>
        </div>
        <?php endif;



    ?>


    <!-- <button>Apply filter</button> -->
    <input type="hidden" name="action" value="myfilter">
</div><!-- row -->
</div>
</form>

这是为select设置样式的JavaScript

<script>
    jQuery(document).ready(function($){

    $('select').each(function(){
    var $this = $(this), numberOfOptions = $(this).children('option').length;

    $this.addClass('select-hidden'); 
    $this.wrap('<div class="select"></div>');
    $this.after('<div class="select-styled"></div>');

    var $styledSelect = $this.next('div.select-styled');
    $styledSelect.text($this.children('option').eq(0).text());

    var $list = $('<ul />', {
        'class': 'select-options'
    }).insertAfter($styledSelect);
    $list.wrap('<div class="scroll-container"><div class="wrap-container"></div></div>');
    for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }

    var $listItems = $list.children('li');

    $styledSelect.click(function(e) {
        e.stopPropagation();
        $('div.select-styled.active').not(this).each(function(){
            $(this).removeClass('active').next('.scroll-container').hide();
        });
        $(this).toggleClass('active').next('.scroll-container').toggle();
    });

    $listItems.click(function(e) {
        e.stopPropagation();
        $styledSelect.text($(this).text()).removeClass('active');
        $this.val($(this).attr('rel'));
        $('.scroll-container').hide();
        //console.log($this.val());
    });

    $(document).click(function() {
        $styledSelect.removeClass('active');
        $('.scroll-container').hide();
    });

});
    });
</script>

这是无限滚动的JavaScript

<script>
    jQuery(function($){

$('#emotional .wrap-container').attr('id', 'wrap-scroll-1');
$('#emotional .wrap-container ul').attr('id', 'ul-scroll-1');

$('#genre .wrap-container').attr('id', 'wrap-scroll-2');
$('#genre .wrap-container ul').attr('id', 'ul-scroll-2');


$('#cinematic .wrap-container').attr('id', 'wrap-scroll-3');
$('#cinematic .wrap-container ul').attr('id', 'ul-scroll-3');


});
</script>

<!-- Infiinite scroll for emotional quality-->
<script>
var scrollW = document.getElementById("wrap-scroll-1");
var scrollUl = document.getElementById("ul-scroll-1");
var itemsScrolled,
  itemsMax,
  cloned = false;

var listOpts = {
  itemCount: null,
  itemHeight: null,
  items: []
};

function scrollWrap() {
    var scrollW = document.getElementById("wrap-scroll-1");
var scrollUl = document.getElementById("ul-scroll-1");
  itemsScrolled = Math.ceil(
    (this.scrollTop + listOpts.itemHeight / 2) / listOpts.itemHeight
  );

  if (this.scrollTop < 1) {
    itemsScrolled = 0;
  }

  listOpts.items.forEach(function(ele) {
    ele.classList.remove("active");
  });

  if (itemsScrolled < listOpts.items.length) {
    listOpts.items[itemsScrolled].classList.add("active");
  }

  if (itemsScrolled > listOpts.items.length - 3) {
    var node;
    for (_x = 0; _x <= itemsMax - 1; _x++) {
      node = listOpts.items[_x];

      if (!cloned) {
        node = listOpts.items[_x].cloneNode(true);
      }

      scrollUl.appendChild(node);
    }

    initItems(cloned);
    cloned = true;
    itemsScrolled = 0;
  }
}

function initItems(scrollSmooth) {
    var scrollUl = document.getElementById("ul-scroll-1");
    var scrollW = document.getElementById("wrap-scroll-1");


  listOpts.items = [].slice.call(scrollUl.querySelectorAll("li"));
  listOpts.itemHeight = listOpts.items[0].clientHeight;
  listOpts.itemCount = listOpts.items.length;

  if (!itemsMax) {
    itemsMax = listOpts.itemCount;
  }

  if (scrollSmooth) {
        var scrollW = document.getElementById("wrap-scroll-1");

    var seamLessScrollPoint = (itemsMax - 3) * listOpts.itemHeight;
    scrollW.scrollTop = seamLessScrollPoint;
  }
}

document.addEventListener("DOMContentLoaded", function(event) {
        var scrollW = document.getElementById("wrap-scroll-1");

  initItems();
  scrollW.onscroll = scrollWrap;
});


</script>

AJAX呼叫

<script>
jQuery(function($){
    jQuery('.select-options li').click(function() {
        var filter = $('#filter');
        $.ajax({
            url:filter.attr('action'),
            data:filter.serialize(), // form data
            type:filter.attr('method'), // POST
            beforeSend:function(xhr){
                filter.find('button').text('Processing...'); // changing the button label
            },
            success:function(data){
                filter.find('button').text('Apply filter'); // changing the button label back
                $('#response').html(data); // insert data
            }
        });
        return false;
    });
});
</script>

原始列表项会触发表单并返回正确的结果。克隆的列表项没有。我认为这与相同的rel值有关，但不确定。

Answer 1

将ajax调用更改为以下建议的方式应该可以使点击对您有效：

<script>
    jQuery(function($){
        jQuery('body').on('click', '.select-options li', function() {
            var filter = $('#filter');
            $.ajax({
                url:filter.attr('action'),
                data:filter.serialize(), // form data
                type:filter.attr('method'), // POST
                beforeSend:function(xhr){
                    filter.find('button').text('Processing...'); // changing the button label
                },
                success:function(data){
                    filter.find('button').text('Apply filter'); // changing the button label back
                    $('#response').html(data); // insert data
                }
            });
            return false;
        });
    });
</script>

之所以可行，是因为现在click事件已绑定在类上，而与该类的元素是在 DOM加载中加载还是在DOM完全加载之后无关。

直接调用.click或使用jQuery('.select-options li').on('click', function(){});格式只能将事件绑定到DOM准备就绪之前加载的元素。

带有无限循环的jQuery样式化的HTML Select

1 个答案: