Question

我正在使用带有.Net中部分视图的模态创建联系我们表单。除了这个js，我还有其他一切工作。我在让js识别cuLink和cuLinkClass方面遇到了问题。 ContactUs函数基于QuickView两者之间的唯一区别（理论上）ContactUs不是创建按钮和模态，只是模态。非常感谢任何帮助。

var ContactUs = (function () {

    var cuLinkClass = 'ico ico-email contact-form';

    function obj(item) {

        ContactUs.initialize(item);

        return this;

    };

    obj.onClick = function (evt) {
        var target = evt.currentTarget || evt.srcElement;
        var url = target.getAttribute('data-rel');
        var modal = jQuery('#contactUsModal.modal-content');

        modal.innerHTML = '<div class="modal-body"> Loading...</div>';
        QuickView.centerElement(modal.parentNode);

        jQuery.ajax({
            url: url,
            sucess: function (m, html) {
                setTimeout(function () {
                    m.innerHTML = html;
                    QuickView.centerElement(m.parentNode);
                }, 30);

            }.bind(null, modal)
        });
    };

    obj.composeButton = function() {
        var cuLink = document.getElementsByClassName(cuLinkClass);
        cuLink.setAttribute('data-target', '#contactUsModal');
        cuLink.setAttribute('data-rel', item.getAttribute('rel'));

    }

    obj.initialize = function (item) {

        item.appendChild(cuLink);
        if (cuLink.addEventListener) cuLink.addEventListener('click', ContactUs.onClick);
        if (cuLink.attachEvent) cuLink.attachEvent('onclick', ContactUs.onClick);

    }

    return obj;
    })();

    var QuickView = (function () {

    var buttonClassName = 'quick-view-btn';
    //var modalContentClassName = 'modal-content';
    var miniClassName = 'mini';
    var windowWidth = 750;

    function obj(item) {

        QuickView.initialize(item);

        return this;
    };


    obj.centerElement = function (elem) {
        elem.style.marginLeft = parseInt(windowWidth / -2) + 'px';
        elem.style.marginTop = parseInt(parseInt(jQuery(elem).height()) / -2) + 'px';
    };


    obj.composeButton = function (isMini) {

        var button = document.createElement('button');

        button.setAttribute('class', buttonClassName);
        button.setAttribute('data-toggle', 'modal');
        button.setAttribute('data-target', '#quickViewModal');

        // if mini button, use magnify style instead
        if (isMini) {
            button.setAttribute('class', buttonClassName + ' ' + miniClassName + ' ' + currentculture);
            button.innerHTML = '<i class="ico ico-magnify"></i>';
        } else
            button.innerHTML = quickViewText;

        return button;
    };


    obj.handleButtonClick = function (evt) {

        var target = evt.currentTarget || evt.srcElement;
        var url = target.getAttribute('data-rel');
        var modal = jQuery('.modal-content')[0];

        // add loading message
        modal.innerHTML = '<div class="modal-body">Loading...</div>';
        QuickView.centerElement(modal.parentNode);

        // AJAX call to load details page
        jQuery.ajax({
            url: url,
            success: function (m, html) {
                // introduce short delay to allow
                // animation to render HTML contents
                setTimeout(function () {
                    m.innerHTML = html;
                    QuickView.centerElement(m.parentNode);
                }, 150);
            }.bind(null, modal)
        });
    };


    obj.initialize = function (item) {

        var isMini = jQuery(item).hasClass(miniClassName);
        var button = QuickView.composeButton(isMini);

        // add rel to button
        button.setAttribute('data-rel', item.getAttribute('rel'));

        // add button to item
        item.appendChild(button);

        // add event listeners
        if (button.addEventListener) button.addEventListener('click', QuickView.handleButtonClick);
        else if (button.attachEvent) button.attachEvent('onclick', QuickView.handleButtonClick);
    };


    return obj;

})();

Answer 1

您需要在其他人可以阅读的范围内定义cuLink。您可以在定义cuLinkClass：

的位置创建变种

var cuLinkClass = 'ico ico-email contact-form';
var cuLink;

然后您可以在同一个地方分配它，但省略var：

cuLink = document.getElementsByClassName(cuLinkClass);

或者您可以将变量附加到obj，然后将其引用到obj.cuLink（如果您了解上下文，则为this.cuLink）：

obj.cuLink = document.getElementsByClassName(cuLinkClass);

我建议你学习一些基本的JS概念，比如原型和上下文。

Answer 2

试试这个（在document ready之外定义你的变种）：

<script language="JavaScript" type="text/JavaScript">
var ContactUs;
var cuLinkClass;
$(document).ready(function(){
    ContactUs = (function () {
    cuLinkClass = 'ico ico-email contact-form';

    function obj(item) {
       ContactUs.initialize(item);
       return this;
    };

});
</script>

Answer 3

使用jquery

解决

  var ContactUs = (function() {
jQuery('#exportcc > li:nth-child(1) > a').click(function () {
    var url = jQuery('#exportcc > li:nth-child(1) > a').data('url');

    jQuery.get(url, function(data) {
        jQuery('#contactUsModalContent > .modal-content').html(data);

        jQuery('#contactUsModal').modal('show');
    });
   }); 
});

发现未定义的js变量

3 个答案: