Question

我试图在用户.mouseover（）.featured_products .featured_products时使用它，而.button会将CSS效果应用于所选容器。我遇到的问题是它改变了.feature_products容器的.css。我希望只改变那个正在使用的那个.mouseover（）。我尝试使用$（this），但我没有正确理解它。

// app/templates/components/page-r.hbs
<div class="pager-container">
  {{#each range as |page|}}
    {{page-button page=page currentPage=currentPage}}
  {{/each}}
</div>

// app/templates/components/page-button.hbs
<button type="button" disabled={{isCurrentPage}}>{{page}}</button>

// app/components/page-r.js

import Ember from 'ember';

const { computed } = Ember;

const PageR = Ember.Component.extend({
  settings: computed('params.[]', function() {
    return this.get('params')[0];
  }),
  range: [4,5,6],
  currentPage: 1
});

PageR.reopenClass({
  positionalParams: 'settings'
});

export default PageR;

// app/components/page-button.js

import Ember from "ember";

const { computed } = Ember;

export default Ember.Component.extend({
  tagName: 'span',
  isCurrentPage: computed('currentPage', 'page', function() {
    return this.get('currentPage') === this.get('page');
  }),
});

这是我的Demo

Answer 1

您可以使用选择器中的第二个参数来表示父级，例如：

$(".fp_button", this).css("background-color", "#00addc");

请在此处查看：http://jsfiddle.net/4417zugn/31/

您还可以执行以下操作：

$(this).find(".fp_button")...

等。有很多方法。

我建议的一件事是更改类名而不是修改单个CSS规则，例如：http://jsfiddle.net/4417zugn/33/

最后，只使用CSS就可以了，例如：http://jsfiddle.net/4417zugn/35/

Answer 2

使用：hover选择器不需要使用jQuery来改变你可以在CSS本身中使用的CSS。然后，您可以使用jQuery切换'fp_hover'类。

$('.featured_products').hover(function(){
    $(this).toggleClass('fp_hover')
})

https://jsfiddle.net/Lozgnz84/

Answer 3

$(".fp_button")对于两个div都很常见;所以而不是写作：

$(".fp_button").css("background-color", "white");

写： $(this).find('.fp_button').css("color", "#FFFFFF");

因此，您的代码变为

$(".featured_products").mouseover(function(){
    $this = $(this);
    $this.find('.fp_button').css({"background-color":"#00addc", "color":"#FFFFFF"});          
    $this.addClass("fp_hover");
 });
$(".featured_products").mouseleave(function(){
  $this.find('.fp_button').css({"background-color":"white", "color":"#000000"});
  $this.removeClass("fp_hover");
});

演示：http://jsfiddle.net/znnamrwn/

Answer 4

你所描述的内容可以在没有jQuery的情况下完成。但是，如果你想使用jQuery，你可以简单地在产品元素上切换一个类。

$('.featured_products').on({
    mouseenter: function() {
        $(this).toggleClass('fp_hover');
    },
    mouseleave: function() {
        $(this).toggleClass('fp_hover');
    }
}, '.featured_product');

http://jsfiddle.net/bradlilley/uwxsr4hu

您也可以在没有jQuery的情况下通过简单地在您的css中添加以下悬停状态来执行上述操作。

.featured_product:hover .fp_button {
    background: #f00;
    color: #000;
}

https://jsfiddle.net/bradlilley/9mwxo9o2/6/

修改：您还应该避免使用鼠标悬停并使用鼠标中心。

Jquery mouseenter() vs mouseover()

如何使用$（this）更改所选元素的CSS

4 个答案: