小编cle*_*ruz的帖子

我已经设法为我正在工作的网站建立了我自己的旋转木马循环.现在我的下一个目标是在调整大小时使其具有响应性和流畅性.我已经设法让它自适应但我不喜欢它根据浏览器维度专门调整大小的方式,而不是流畅地调整大小.这是我一直在研究的代码示例.

我正在尝试根据显示的项目数量调整项目大小和幻灯片.让我们说如果它是一个768px的视口,它将显示3个项目并将旋转木马滑动3,如果它的移动设备说640px或480px.它将显示1项并按1滑动

我知道那里已经有现成的旋转木马,但我更愿意尝试从头开始构建它

(function ($) {
        'use strict';

        var carousel = {

            init : function() {

                var carouselWidth = 0,
                    itemListContainer = $('.item-list').width(),
                    itemList = $('.carousel .item-list ul li');
               

                // Set Container Width
                $('.carousel .item-list ul').children().each(function() {
                    carouselWidth += $(this).outerWidth();
                    $('.carousel .item-list ul').width(carouselWidth + 1000);
                });
              

               // function dynamicItemWidth() {
               //      if ( $('body') <= 1024 ) {
               //          itemWidth = itemList.width( itemListContainer / 5 );
               //      }

               //      if ( $('body') <= 480 ) {
               //          itemWidth = itemList.width( …

我试图弄清楚如果元素匹配ID而不是使用锚标记,我可以使用数据属性将元素滚动到特定元素.这就是我的工作.

一旦用户点击按钮,它将显示内容并滚动到与数据属性匹配的特定元素.我好像无法滚动它

<div class="container">
    <div class="post" data-id="content-one">
        post one
    </div>
    <div class="post" data-id="content-two">
        post two
    </div>
</div>
<div class="container-two">
    <div id="content-one" class="post-content" >
      content one
    </div>
    <div id="content-two" class="post-content" >
      content two
    </div>
</div>

$(".container .post").on('click', function() {
    var data_id = $(this).data('id');
    $('.post-content').each(function() {
        var el = $(this);
        if (el.attr('id') == data_id)
            el.show();
        else
            el.hide();
    });
    $('html, body').animate({
        scrollTop: $(data_id).offset.top()
    }, 'slow');
});

https://jsfiddle.net/clestcruz/vf4ufg6b/

抱歉，如果标题有点混乱，我会尝试通过代码进行解释。基本上我创建了一个按钮来显示或隐藏电子商务网站的购物车（我正在使用 woocommerce）。这是我正在使用的代码示例。

HTML 标记

<div  class="crate-status toggle-cart">
    <img src="http://localhost/crate/wp-content/uploads/2016/05/mini-cart-icon.png" /><span class="crate-name">Crate:</span>
    <span class="cart-contents"><?php echo sprintf (_n( '%d', '%d', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?></span>

    <?php woocommerce_header_add_to_cart_fragment( $fragments ) ?>
</div>

Javascript

$(document).ready(function() {
    $('.toggle-cart' ).on('click', function(event) {
        $('.crate-box').toggleClass('toggle');
        $('.overlay-site').toggleClass('show-overlay');
    })

    $('body').on('click', function(event) {
      if (!$(event.target).is('.toggle-cart')) {
        $('.crate-box').removeClass('toggle');
        $('.overlay-site').removeClass('show-overlay');
      }
    })

})

该按钮工作正常，但是当我单击 img 或 span 等子元素时，即使它位于父元素（.toggle-cart）内，它似乎也不会触发 onclick 功能

这是网站的链接http://crate.ph/home/

我试图弄清楚如何在到达列表的最后一项后重新启动我的循环。基本上它active每 3 秒将类传递给下一个兄弟。一旦到达最后一项，我如何让它传递到列表中的第一项。

我在想，如果我可以在我的程序中使用if/else而不是for循环

$(document).ready(function() {



	function durationSlider() {
	    var listItems = $('.loop ul li').length;

		for(count=0; count <= listItems - 1; count++ ) {
         
            (function(count) {
                setTimeout(function() {
					$('.loop ul li.active').removeClass('active');
					$('.loop ul li:eq(' + count +   ')').addClass('active');	
					console.log(count);
                }, 3000 * count);
            }(count));
		}		
	}

	durationSlider();
    

})
	

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, …

我试图找出如何在单击元素本身时删除父类的类.以下面的代码为例.我有一个on-click事件,在父元素或列表元素上添加一个类.现在,如果我在该元素中创建了一个click事件以删除父元素,那么它将无法工作,因为它位于父元素内.

javascript将假设我正在点击父级,但我实际上是在父元素中单击某些内容.

$('ul li').on('click', function() {
    $(this).addClass('parent-class')
})


$('ul li span').on('click', function() {
    $('ul li').removeClass('parent-class')
})

ul li {
    position : absolute;
    cursor : pointer;
}

ul li span {
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li> Parent <br/>
        <span class="remove-parent-class">
            Remove Parent Class
        </span>
    </li>
</ul>

我试图弄清楚如何将多个附加链接到我的标记中。基本上在附加一个元素之后，我希望下一个元素将其附加到第一个附加元素。我希望我说的有道理。

如果你看一下我的代码，我只是将元素附加<ul class="menu" />到元素中#footer .research-centers-menu .research。

然后在下一个代码中我尝试将变量插入/附加centers到<ul class="menu" />

现在的当前输出不会插入该元素，而是将其放置在外部。为我的英语不好和解释道歉

var researchCenters = $('a[href$="/items"]').next().clone(),
  centersList = $('li', researchCenters),
  centers = centersList.slice(0);


var research = $('#footer .research-centers-menu .research').append('<ul class="menu" />');

$(research).append(centers);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="aim/items"></a>
    <ul>
      <li>item one</li>
      <li>item two</li>
    </ul>
  </li>
</ul>

<div id="footer">
  this is a footer
  <div class="research-centers-menu">
    <div class="research">

    </div>

  </div>
</div>

有没有办法将值推入空object？我这里有一个显示国家名称和人口的国家列表.我想将这些值插入到对象中,就像下面的示例一样.

<ul class="countries">
    <li  class="country">
        <span class="country-name">Philippines</span>
        <span class="country-population">200</span>
        <span class="description">Blablabla</span>
    </li>
    <li class="country">
        <span class="country-name">Brunei</span>
         <span class="country-population">200</span>
         <span class="description">Blablabla</span>
     </li>
     <li class="country">
         <span class="country-name">Malaysia</span>
         <span class="country-population">400</span>
         <span class="country-population">Blablabla</span>
     </li>

</ul>

var countries = [
    {name: "Philippines", population: 200, description: "Blablabla"},
    {name: "Brunei", population: 200, description: "Tatatata"},
    {name: "Malaysia", population:4100, description: 'Zzazazaza'}
]

0: {name: "Philippines", population: 200, description: "Blablabla"}
1: {name: "Brunei", population: 200, description: "Tatatata"}
2: {name: "Malaysia", population: 400, description: "Zzazazaza"}

我尝试了下面的脚本,但只插入了国家/地区的名称.怎么还插入population和description …