将JavaScript代码中的新参数传递给目标HTML属性

omjgkv6w  于 2023-02-28  发布在  Java
关注(0)|答案(1)|浏览(115)

我目前已经创建了一段Javascript代码,它检查HTTP响应,如果它是一个成功的200代码,交通灯显示绿色,如果它不是一个200代码,交通灯 Flink 红色。
我目前的问题是我希望能够像这样将两个参数传递给初始化函数

requestResponses.init('/status', "ATTR");

第一个属性是我想要测试的URL,第二个属性是我创建的HTMLdata-request属性的值。
我这样做的原因,因为我想有多个交通灯在同一个网页上针对不同的网址同时没有相互影响。
例如,我创建了一个数据请求属性,并将其值指定为Four,然后我希望能够像这样将其连接起来

requestResponses.init('/status', "Four");

并开始在代码中定位如下元素。这使得它更加模块化和可重用。

.cp_trafficLight[data-request="Four"]

请找到我的代码附件和一个工作的JSFiddle。

var requestResponses = {

    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, targAttr) {
        requestResponses.url = url;
        requestResponses.getResponse(requestResponses.url, targAttr);
        setInterval(function () {
            if (requestResponses.errorCode === true) {
                requestResponses.redLight.toggleClass(requestResponses.redBright);
            }
        }, requestResponses.settings.flashError);
    },

    successResponse: function (targAttr) {
        requestResponses.errorCode = false;
        requestResponses.redLight.removeClass(requestResponses.redBright);
        requestResponses.greenLight.addClass(requestResponses.greenBright);
        console.log(targAttr);
    },

    errorResponse: function (targAttr) {
        requestResponses.greenLight.removeClass(requestResponses.greenBright);
    },

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

    errorCode: false
}

requestResponses.init('/status', "TEST");

https://jsfiddle.net/8700h582/

gab6jxml

gab6jxml1#

然后在函数中包含用逗号分隔的第二个参数。

function foo(param1, param2) {

    //Do something.

};

foo("1st", "2nd");

EDIT我现在看到在你的init中包含了第二个参数,在init函数中传递第二个参数给你的请求,然后从那里传递给你的error和respons函数,然后返回函数。这可以保存在一个var中。

相关问题