Question

我希望使用Javascript将HTML5数据属性传递给参数。我的问题是，如果我将一个值传递给参数，它不会查找该特定值，而是已经从全局变量设置。

例如，我有一个

的组件

data-request="Five"

我希望能够通过

requestResponses.init('URLHERE', 'Five');

并使用Five Only定位元素，以便选择器变为

.cp_trafficLight[data-request="Five"] .cp_trafficLight_Light--greenDimmed'

目前我只是抓取HTML5数据属性值并使用

进行定位

targObj = $('.cp_trafficLight').data("request");

我知道这可能是一个简单的答案，但我似乎无法破解它。我的所有代码都发布在下面，我还会发布一个视觉用途的小提琴。

targObj = $('.cp_trafficLight').data("request");

var requestResponses = {

    targSel: '.cp_trafficLight[data-request=' + '"' + targObj + '"' + ']' + ' ',
    greenLight: '.cp_trafficLight_Light--greenDimmed',
    redLight: '.cp_trafficLight_Light--redDimmed',
    greenBright: 'cp_trafficLight_Light--greenBright',
    redBright: 'cp_trafficLight_Light--redBright',

    settings: {
        flashError: 400,
        requestTime: 10000
    },

    init: function (url, targObj) {
        requestResponses.url = url;
        requestResponses.getResponse(requestResponses.url);
        setInterval(function () {
            if (requestResponses.errorCode === true) {
                $(requestResponses.targSel + requestResponses.redLight).toggleClass(requestResponses.redBright);
            }
        }, requestResponses.settings.flashError);
    },

    successResponse: function (targObj) {
        requestResponses.errorCode = false;
        $(requestResponses.targSel + requestResponses.redLight).removeClass(requestResponses.redBright);
        $(requestResponses.targSel + requestResponses.greenLight).addClass(requestResponses.greenBright);
    },

    errorResponse: function (targObj) {
        $(requestResponses.targSel + requestResponses.greenLight).removeClass(requestResponses.greenBright);
    },

    getResponse: function (serverURL) {
        $.ajax(serverURL, {
            success: function () {
                requestResponses.errorCode = false;
                requestResponses.successResponse(targObj);
            },
            error: function () {
                requestResponses.errorCode = true;
                requestResponses.errorResponse(targObj);
            },
            complete: function () {
                setTimeout(function () {
                    requestResponses.getResponse(requestResponses.url);
                }, requestResponses.settings.requestTime);
            }
        });
    },

    errorCode: false
}

requestResponses.init('status/index.html', 'Two');

https://jsfiddle.net/co6w6m2L/

将HTML5数据属性作为参数传递给函数

0 个答案: