那些遇到过的问题

小编use*_*564的帖子

将div粘贴到浏览器窗口的底部

我有一个div,我想坚持浏览器窗口的底部(实际的浏览器窗口不是页面).当用户滚动时,div需要保持在浏览器窗口的底部.

现在,div将在第一个初始滚动时粘在窗口的底部,但每次有新的滚动时它都不会重新定位.这是我对jQuery的看法:

$(window).scroll(function () { 
    var bHeight = $(window).height();
    $('.test').css({
        top: bHeight - 77 + 'px'
    });
});
Run Code Online (Sandbox Code Playgroud)

这是一个jsfiddle http://jsfiddle.net/3ecx7zp9/1/

html javascript css jquery

use*_*564
2015 08-11
8
推荐指数
3
解决办法
2万
查看次数

显示json数组中的所有项目

我正在尝试与json合作,我几乎拥有我需要的东西.我正在显示正确的信息,但我必须将数组中的每个项目传递给变量,然后打印变量.我想显示每个数组中的所有项目.我正在使用的json数据来自一个发票应用程序(www.curdbee.com),我正在尝试为客户显示每张发票.我想要显示的数据是每个订单项,订单项价格和总金额.这是我的代码:

$(document).ready(function() {


    $.getJSON('https://nspirelab.curdbee.com/invoices.json?api_token=__token__', function(data){
        $.each(data, function(index, item){
            var total = item.invoice.total_billed;
            var lineItemName1 = item.invoice.line_items[0].name_and_description;
            var lineItemName2 = item.invoice.line_items[1].name_and_description;
            var lineItemPrice1 = item.invoice.line_items[0].price; 
            var lineItemPrice2 = item.invoice.line_items[1].price; 

            $('#results').append('<div class="lineItem"><ul><li>' + lineItemName1 + lineItemPrice1 + '</li><li>' + lineItemName2 + lineItemPrice2 + '</li><li>' + total + '</li></ul></div>');
        });

    });

});
Run Code Online (Sandbox Code Playgroud)

javascript jquery json

use*_*564
2012 05-21
7
推荐指数
1
解决办法
4787
查看次数

如果用户点击另一个按钮,则还原CSS

我有一个jQuery UI手风琴,其中包含每个标题元素的右箭头.当用户单击标题以显示内容时,箭头将变为向下箭头.当用户单击标题以隐藏内容时,箭头会变回其原始形式.

当用户点击其他节标题而没有先关闭上一节时,我的问题就来了.如果用户点击第1部分,箭头将会改变.如果用户然后单击第2部分,则第2部分箭头将更改,但第1部分箭头将保持在向下位置.如果用户点击任何其他部分标题,我需要箭头更改回向右箭头.

这是我的脚本:

var toggleState = true;

$("#wholesale section").on("click", function () {
    if(toggleState) {
        $(this).find(".dropdown-arrow").html("&#x25BC;");
        $(this).css("background", "#ececec");
    } else {
        $(this).find(".dropdown-arrow").html("&#9658;");
        $(this).css("background", "#f7f7f7");
    }
    toggleState = !toggleState;
});
Run Code Online (Sandbox Code Playgroud)

javascript css jquery

use*_*564
2014 01-07
5
推荐指数
1
解决办法
230
查看次数

使用jQuery UI datepicker选择下一天和前一天

我正在使用jQuery UI datepicker,我有一个按钮,可以将所选日期向前更改一天,还有一个按钮可以将所选日期向后更改一天.现在,我的"前一天"按钮工作正常.如果多次单击我的上一个按钮然后单击我的"第二天"按钮,它只会增加一次日期.例如,如果将datepicker设置为2014年1月10日并单击"第二天"按钮,它将更新为2014年1月11日,但如果再次单击它,则不会发生任何事情.如果我点击"第二天"按钮而没有先单击"前一天"按钮,它将正常工作.这是我的jQuery:

var currentDay = new Date();
var nextDay = new Date();
var previousDay = new Date();

$('.next-day').each(function() {
    $(this).on("click", function () {

        if (previousDay < currentDay) {
            nextDay.setDate(previousDay.getDate() + 1);
        } else {
            nextDay.setDate(nextDay.getDate() + 1);
        }

        $('#to').datepicker("setDate", nextDay);
        $('#from').datepicker("setDate", nextDay);
    });
});
Run Code Online (Sandbox Code Playgroud)

编辑:这是一个jsFiddle http://jsfiddle.net/p2T2g/

javascript jquery jquery-ui datepicker

use*_*564
2014 01-17
5
推荐指数
2
解决办法
1万
查看次数

Gulp手表......不在看？

我正在设置我的gulp.js文件,除了gulp.watch之外,一切正常.当我在终端中运行"gulp"时,gulp会执行每项任务但不会注意更改.有什么我应该改变的吗？

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    del = require('del');

// Styles
gulp.task('styles', function() {
  return gulp.src('src/css/main.scss')
    .pipe(sass({ style: 'expanded', }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('build/css'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('build/css'))
    .pipe(notify({ message: 'Styles task complete' })); …
Run Code Online (Sandbox Code Playgroud)

gulp gulp-watch

use*_*564
lucky-day
5
推荐指数
1
解决办法
8008
查看次数

jQuery if语句导致浏览器崩溃

我有一个小脚本,如果按下相应的按钮,应显示隐藏的div.例如,如果单击按钮第一个按钮,则应显示div第一个按钮内容.现在,当我点击按钮时,Chrome崩溃并且div没有显示.

这是html:

    <div class="home-middle-buttons">
        <div class="first-button">
            <span>I’m an In-House Marketer</span>
        </div>
        <div class="second-button">
            <span>I Work at an Agency</span>
        </div>
        <div class="third-button">
            <span>I’m a Business Owner</span>
        </div>
    </div>
    <div class="home-middle-content">
        <div class="first-button-content">
            <p>Lorem ipsum dolor</p>
        </div>

        <div class="second-button-content">
            <p>Lorem ipsum dolor</p>
        </div>

        <div class="third-button-content">
            <p>Lorem ipsum dolor.</p>
        </div>
    </div>
Run Code Online (Sandbox Code Playgroud)

这是脚本: 

jQuery(document).ready(function() {
    jQuery(".home-middle-buttons div").click(function() {
        if (jQuery(".first-button").click()) {
            jQuery(".first-button-content").css( 'display', 'block' );
        } else {
            jQuery(".second-button-content").css( 'display', 'block' );
        }
    });
});
Run Code Online (Sandbox Code Playgroud)

javascript jquery

use*_*564
lucky-day
3
推荐指数
2
解决办法
641
查看次数

使用 jQuery 查找前一个同级元素

在下面的 HTML 中，我想将一个类添加到类为“div-class”的 div 之前的第一个同级 P 元素。

<p>hello</p>
<p>hello</p> -> add class to this element
<div><p>test</p></div>
<div class="div-class"></div>
Run Code Online (Sandbox Code Playgroud)

这不起作用：

jQuery(".div-class").prev("p").addClass("p-class");
Run Code Online (Sandbox Code Playgroud)

javascript jquery

use*_*564
2019 04-25
3
推荐指数
1
解决办法
8896
查看次数

按CSS属性选择jQuery

我试图通过CSS选择一个图像,通过CMS自动应用到该图像,然后添加一个类.这是我的脚本:

$(document).ready(function() {
    if ($('.pageBody p img').css('float') === 'right') {
        $('.pageBody p img').addClass('float-right');
    }
});
Run Code Online (Sandbox Code Playgroud)

该脚本适用于已float: right应用的图像.还有另一个图像已float: left应用.问题是,如果我在脚本中将"右"切换为"左"而不是"不行".例如,如果我将图像设置为float: left并使用此脚本,则它不起作用:

$(document).ready(function() {
    if ($('.pageBody p img').css('float') === 'left') {
        $('.pageBody p img').addClass('float-left');
    }
});
Run Code Online (Sandbox Code Playgroud)

javascript jquery

use*_*564
lucky-day
2
推荐指数
1
解决办法
683
查看次数

重构jQuery代码块？

我有一小段jQuery代码，我必须一遍又一遍地重复，每次迭代都只需要做一点改动。这是我所拥有的一个例子：

  if($('.smm').hasClass('vendor-icon-active')) {
      total = total + 1200;
  } else {
    total = total;
  }

  if($('.repman').hasClass('vendor-icon-active')) {
      total = total + 495;
  } else {
    total = total;
  }

  if($('.blog-management').hasClass('vendor-icon-active')) {
      total = total + 395;
  } else {
    total = total;
  }

  if($('.press-release').hasClass('vendor-icon-active')) {
      total = total + 195;
  } else {
    total = total;
  }
Run Code Online (Sandbox Code Playgroud)

在我的代码中，我大约有30个部分。有没有一种方法可以简化该过程并清理我的代码？

jquery refactoring

use*_*564
lucky-day
1
推荐指数
1
解决办法
592
查看次数

"$ .______不是函数"错误.怎么了？

我正在尝试将图像旋转器添加到我的网站,但由于某种原因,firebug告诉我,我需要调用启动旋转器的功能未定义.我的jQuery文件加载得很好,图像旋转器脚本正在加载,所以我不确定是什么问题.该网站是heritage.newcoastmedia.com但我会继续发布脚本:

;(function($) {
    $.fn.featureList = function(options) {
        var tabs    = $(this);
        var output  = $(options.output);

        new jQuery.featureList(tabs, output, options);

        return this;    
    };

    $.featureList = function(tabs, output, options) {
        function slide(nr) {
            if (typeof nr == "undefined") {
                nr = visible_item + 1;
                nr = nr >= total_items ? 0 : nr;
            }

            tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current');

            output.stop(true, true).filter(":visible").fadeOut();
            output.filter(":eq(" + nr + ")").fadeIn(function() {
                visible_item = nr;  
            });
        }

        var options         = options || {}; 
        var total_items …
Run Code Online (Sandbox Code Playgroud)

javascript jquery function

use*_*564
lucky-day
0
推荐指数
1
解决办法
305
查看次数

将jQuery应用于div的每个部分

我有一段类似于html的html:

<div class="ms-row">
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
</div>
<div class="ms-row">
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
</div>
<div class="ms-row">
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
    <div class="ms-image"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

我有一个jQuery脚本应该影响每个ms-row div中的每个ms-image div.目前,它仅适用于第一个ms-row div.如果我这样做:

$( document ).ready(function() 
    $('.ms-row .ms-image').hide();
    $('.ms-row .ms-image:lt(6)').show();
});
Run Code Online (Sandbox Code Playgroud)

除前六个外,所有ms-image div都被隐藏.我需要显示每个ms行中的前六个div,而不是第一个ms-row div中的前六个div.

小提琴

html javascript css jquery

use*_*564
2014 04-05
0
推荐指数
1
解决办法
700
查看次数

如何将jQuery插件应用于同一页面上的多个div？

我正在研究一个jQuery插件,我需要它在一个页面上处理多个div.基本上,我有两个菜单,当用户点击一个菜单项时,背景颜色会发生变化.现在,效果将应用于两个菜单而不是单独使用.例如,如果单击菜单1中的第一项,则背景会发生变化,但如果单击菜单2的第二项,则第2项菜单2的背景将被删除,而第2项菜单2的背景将更改.

我需要让菜单彼此完全分开.单击菜单1不应更改菜单2.以下是目前设置插件的方式:

(function ($) {
    $.fn.selectBox = function () {
        function get() {
            $('.ms-section-select li').first().addClass('ms-checked');
        }

        function get() {
            $('.ms-section-select li').click(function () {
                $('.ms-section-select li').removeClass('ms-checked');
                $(this).addClass('ms-checked');
            });
        }
        return this.each(get);
    };
})(jQuery);

$('.one').selectBox();
$('.two').selectBox();
Run Code Online (Sandbox Code Playgroud)

这是一个包含所有代码的jsfiddle示例http://jsfiddle.net/977hv/

html javascript css jquery

use*_*564
lucky-day
0
推荐指数
1
解决办法
103
查看次数

标签 统计

jquery ×11

javascript ×10

css ×4

html ×3

datepicker ×1

function ×1

gulp ×1

gulp-watch ×1

jquery-ui ×1

json ×1

refactoring ×1