小编Jay*_*-oh的帖子

如果少于 8 个 div,则隐藏 div 的 5 到 7

请耐心等待。我在 Wordpress 中有一个循环,每页显示 8 个帖子。但有时循环没有 8 个帖子。如果发生这种情况,我想hidediv 5 到 7。如果每页有 8 个帖子(8 个 div)显示所有 8 个帖子。

所以假设我有以下 HTML

<div class="post">Post 1</div>
<div class="post">Post 2</div>
<div class="post">Post 3</div>
<div class="post">Post 4</div>
<div class="post">Post 5</div>
<div class="post">Post 6</div>
<div class="post">Post 7</div>
Run Code Online (Sandbox Code Playgroud)

比它只会显示帖子 1 到 4,而不是帖子 5 到 7。但是如果我有以下 HTML:

<div class="post">Post 1</div>
<div class="post">Post 2</div>
<div class="post">Post 3</div>
<div class="post">Post 4</div>
<div class="post">Post 5</div>
<div class="post">Post 6</div>
<div class="post">Post 7</div>
<div class="post">Post 8</div>
Run Code Online (Sandbox Code Playgroud)

它将显示所有帖子...

我一直在试验,lenght但我对 jQuery 很陌生。我有这个:console.log( …

html javascript jquery

3
推荐指数
1
解决办法
410
查看次数

使用 AJAX 加载 Bootstrap 选择器

我有一个与thisthis类似的问题。我已经尝试了评论中描述的所有解决方案。并达到了它可以工作的程度。

我的问题,当我从#main_cat内容中选择一个选项时.sub_cat是第一次加载(AJAX 加载正确)。但是如果我从#main_cat加载的内容中选择另一个选项但不使用选择选择器样式。它只是显示:

glyphicon-sort-by-alphabetOPTION 1 (以下截图)

HTML

<select id="main_cat" name="main_cat" class="selectpicker">
    <option selected="-1">Kies een thema</option>
    <option value="Actief_Avontuur" data-name="Actie & avontuur" data-icon="glyphicon-sort-by-alphabet" class="special">&nbsp;&nbsp;Actief, sportief en avontuurlijk</option>
    <option value="Creatief" data-name="Creatief" data-icon="glyphicon-sort-by-alphabet-alt" class="special">&nbsp;&nbsp;Creatief</option>
</select>
<select name="sub_cat" disabled="disabled" class="selectpicker_1 sub_cat">
Run Code Online (Sandbox Code Playgroud)

jQuery

$(function(){
    $('#main_cat').change(function(){
        var $option = $(this).find('option:selected'),
            id = $option.val(),
            name = $option.data('name');
            // open your browser's console log and ensure that you get the correct values
        console.log(id, name);
            $(".sub_cat").empty();
            // call ajax
        $.ajax({ …
Run Code Online (Sandbox Code Playgroud)

javascript php ajax jquery twitter-bootstrap

2
推荐指数
1
解决办法
2万
查看次数

从下拉列表中选择值时触发 AJAX

我正在制作一个简单的下拉菜单,仅当用户在我们的网站上使用移动设备时才显示该菜单。目标是让用户选择一个值并post通过 AJAX 获取该值。

我已经使用普通链接()在非移动设备上完成了这一切a href's,但在移动设备上我似乎无法让它工作。这是我到目前为止所得到的。

我的简单下拉菜单

<select id="dropdown-mobile" name="Select-item">
    <option>Select something ... </option>
    <option class="class-x" href="#" data-value="item-A" data-name="item-A" value="item-A">item-A</option>
    <option class="class-x" href="#" data-value="item-B" data-name="item-B" value="item-B">item-B</option>
    <option class="class-x" href="#" data-value="item-C" data-name="item-C" value="item-C">item-C</option>
</select>
Run Code Online (Sandbox Code Playgroud)

我的 AJAX 脚本

$(document).ready(function()  {
    $('option.class-x').click(function(e){
        var datalist = $(this).data('value');
        var dataname = $(this).data('name');
        console.log(datalist,dataname);
        $.ajax({
            type: "POST",
            url: "/loop-change.php",
            data:{datalist:datalist,dataname:dataname},
            success: function(response) {

                        if ($("#content").html() != response) {
                            $('.loadscreen').delay(1000).fadeOut(500);
                        $("#content").fadeIn(3000, function() {
                            $('a').removeClass('clicked');
                        $("#content").html(response);
                            $('a[data-value = '+datalist+']').addClass('clicked');                      
                            $("#content").fadeIn(3000);
                            $('.loadscreen').delay(1000).fadeOut(500);
                    });
                }
            }
        }); …
Run Code Online (Sandbox Code Playgroud)

html javascript ajax jquery

2
推荐指数
1
解决办法
2万
查看次数

标签 统计

javascript ×3

jquery ×3

ajax ×2

html ×2

php ×1

twitter-bootstrap ×1