小编RAC*_*RAC的帖子

我一直在搜索但是空白,我想知道我是否可以使用一个jQuery语句来定位页面上的多个元素.我在页面上有几个相同的按钮,它们每个都由左,中,右背景组成,中间包含文本,可以扩展到任何必要的大小.每个都有一个唯一的Id和/或类.我现在设置它,以便当你将鼠标悬停在它们的容器div上时,3个背景会改变,以显示按钮处于不同状态的外观.它现在完成的方式是对每个按钮进行1次悬停调用,该按钮由Class定位(宁可使用ID,但不能有多个具有相同ID的元素).这个悬停之后是8个事件.每个右侧和中间的背景更改以及中间文本的颜色更改.

这意味着许多代码行.我想要的是能够使用悬停事件一次调用所有按钮,或者让悬停事件以某种方式知道哪个按钮正在悬停,并抛出该类或id甚至命名回jQuery然后可以更改右侧左侧和中间的按钮子类.右侧和中间的子类在所有按钮上是相同的,所以如果悬停事件可以集中在任何称为它的事件上,我只需要一组调用来更改背景属性...当前代码低于两个按钮......

$j(".learnMoreButton").hover(
    function () { 
        $j('.learnMoreButton .buttonLeft').css({background:"url(/images/concaveBtn-Left2.gif)"}); 
        $j('.learnMoreButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle2.gif)"); 
        $j('.learnMoreButton .buttonMiddle a').css({color:"#ffffff"});
        $j('.learnMoreButton .buttonRight').css({background:"url(/images/concaveBtn-Right2.gif)"});
    }, 
    function () { 
        $j('.learnMoreButton .buttonLeft').css({background:"url(/images/concaveBtn-Left.gif)"});
        $j('.learnMoreButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle.gif)"); 
        $j('.learnMoreButton .buttonMiddle a').css("color", "#666");
        $j('.learnMoreButton .buttonRight').css({background:"url(/images/concaveBtn-Right.gif)"});
        }
    );

$j(".bioButton").hover(
    function () { 
        $j('.bioButton .buttonLeft').css({background:"url(/images/concaveBtn-Left2.gif)"}); 
        $j('.bioButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle2.gif)"); 
        $j('.bioButton .buttonMiddle a').css({color:"#ffffff"});
        $j('.bioButton .buttonRight').css({background:"url(/images/concaveBtn-Right2.gif)"});
    }, 
    function () { 
        $j('.bioButton .buttonLeft').css({background:"url(/images/concaveBtn-Left.gif)"});
        $j('.bioButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle.gif)"); 
        $j('.bioButton .buttonMiddle a').css("color", "#666");
        $j('.bioButton .buttonRight').css({background:"url(/images/concaveBtn-Right.gif)"});
        }
    );

我正在尝试动态更改我的GA跟踪ID(UA-XXXXXXX-X),具体取决于正在查看该页面的环境,但我似乎找不到真正"有角度"的方式来执行此操作.我正在使用Angulartics,但我无法获得基本的GA代码,在Angulartics可以做任何事情之前需要运行.如果我只是将GA代码放在页面底部,它按预期工作,但不是很像Angular,它仍然不允许我动态设置GA ID.

我已经尝试创建一个指令,但是当放入指令的控制器时,跟踪代码似乎没有运行.我创建了一个控制器,它从休息调用中获取环境,然后根据返回的环境分配GA代码,但是当我运行指令时,它运行到早期,GA代码不会触发或触发,而跟踪ID是仍未定义.我还尝试将GA代码放入指令模板中,但出于某种原因,当放在ngAnalytics.html模板内的脚本标记内时,代码根本不会触发,即使我可以看到它在dom中被正确添加到页面中已加载.我是棱角分明的,所以我知道有一个解决方案,但我没有看到它.我的指示如下:

angular.module('ngAnalytics', [])
.directive('ngAnalytics', function( servicesSrvc) {
    return {
        restrict: 'A',
        templateUrl: 'js/directives/ngAnalytics.html',
        controller: ['$scope', function($scope) {
            $scope.trackingID;
            $scope.getEnvDetails = function() {
                var currentEnv = servicesSrvc.getEnv();
                var env;
                currentEnv.then(function(data) {
                    env = JSON.stringify(data.environment);
                    switch(env)
                {
                    case 'local':
                        $scope.trackingID = 'disabled'; // DEV
                        break;
                    case 'dev':
                        $scope.trackingID = 'UA-XXX-X'; // DEV
                        break;
                    ...
                        $scope.trackingID = 'UA-XXX-X'; // Default to dev
                }
                (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
                ga('create', $scope.trackingID, { 'cookieDomain': 'none' }); // For localhost testing
                //ga('create', $scope.trackingID, 'test.com'); …