Виклик функції Javascript з аргументом і використовуйте аргумент як ім'я змінної

Маю наступний фрагмент коду:

var about = "about.html";

function loadPage(target){
    $("#dashboard").load(target);
}

$(".nav li").click(function(){
    loadPage($(this).attr("class"));
});

Тому, коли я натискаю кнопку, як

  • , target є = про .
    Але таким чином $ ("# dashboard"). Load (target); не завантажує змінну, про яку є html-файл, який я хочу завантажити.

    Отже, як можна викликати змінну таким чином?

  • 1
    Можливо, вам потрібен розширення імені сторінки? І це буде невдало з множинним класом, подібним до class = "myclass about myotherclass"
    додано Автор Mark Schultheiss, джерело
    Я думаю, роз'яснення вас питання, як "Я хочу використовувати атрибут класу, щоб вказати, яку змінну я хочу посилання" може бути в порядку.
    додано Автор Mark Schultheiss, джерело
    Я думаю, роз'яснення вас питання, як "Я хочу використовувати атрибут класу, щоб вказати, яку змінну я хочу посилання" може бути в порядку.
    додано Автор Mark Schultheiss, джерело
    Я думаю, роз'яснення вас питання, як "Я хочу використовувати атрибут класу, щоб вказати, яку змінну я хочу посилання" може бути в порядку.
    додано Автор Mark Schultheiss, джерело
    Можливо, вам потрібен розширення імені сторінки? І це буде невдало з множинним класом, подібним до class = "myclass about myotherclass"
    додано Автор Mark Schultheiss, джерело

    9 Відповіді

    Ви, здається, втрачаєте частину .html . Спробуйте з

    $("#dashboard").load(target+'.html');
    

    Але, якщо у вашому елементі li є лише один клас, краще використовувати this.className , а не $ (this) .attr ("class") ) .

    EDIT:

    якщо ви хочете використовувати змінну про , ви можете зробити це:

    $("#dashboard").load(window[target]);
    

    Але було б чистіше мати карту:

    var pages = {
       'about': 'about.html',
       'home': 'welcome.jsp'
    }
    function loadPage(target){
        $("#dashboard").load(pages[target]);
    }
    $(".nav li").click(function(){
        loadPage(this.className);
    });
    
    3
    додано
    @ user2413035 Я не впевнений, що вас розумію. Чи можна редагувати відповідь на ваше запитання?
    додано Автор Denys Séguret, джерело
    Гаразд, це хороша альтернатива. Але чи не можна викликати змінну так? У випадку, якщо це не html-сторінка, то інше, і я ПОВИННА називати цю змінну. Як це можливо?
    додано Автор user2413035, джерело
    так, вибачте. Не знаю, що це так просто! спасибі
    додано Автор user2413035, джерело

    Ви, здається, втрачаєте частину .html . Спробуйте з

    $("#dashboard").load(target+'.html');
    

    Але, якщо у вашому елементі li є лише один клас, краще використовувати this.className , а не $ (this) .attr ("class") ) .

    EDIT:

    якщо ви хочете використовувати змінну про , ви можете зробити це:

    $("#dashboard").load(window[target]);
    

    Але було б чистіше мати карту:

    var pages = {
       'about': 'about.html',
       'home': 'welcome.jsp'
    }
    function loadPage(target){
        $("#dashboard").load(pages[target]);
    }
    $(".nav li").click(function(){
        loadPage(this.className);
    });
    
    3
    додано
    @ user2413035 Я не впевнений, що вас розумію. Чи можна редагувати відповідь на ваше запитання?
    додано Автор Denys Séguret, джерело
    Гаразд, це хороша альтернатива. Але чи не можна викликати змінну так? У випадку, якщо це не html-сторінка, то інше, і я ПОВИННА називати цю змінну. Як це можливо?
    додано Автор user2413035, джерело
    так, вибачте. Не знаю, що це так просто! спасибі
    додано Автор user2413035, джерело

    Ви, здається, втрачаєте частину .html . Спробуйте з

    $("#dashboard").load(target+'.html');
    

    Але, якщо у вашому елементі li є лише один клас, краще використовувати this.className , а не $ (this) .attr ("class") ) .

    EDIT:

    якщо ви хочете використовувати змінну про , ви можете зробити це:

    $("#dashboard").load(window[target]);
    

    Але було б чистіше мати карту:

    var pages = {
       'about': 'about.html',
       'home': 'welcome.jsp'
    }
    function loadPage(target){
        $("#dashboard").load(pages[target]);
    }
    $(".nav li").click(function(){
        loadPage(this.className);
    });
    
    3
    додано
    @ user2413035 Я не впевнений, що вас розумію. Чи можна редагувати відповідь на ваше запитання?
    додано Автор Denys Séguret, джерело
    Гаразд, це хороша альтернатива. Але чи не можна викликати змінну так? У випадку, якщо це не html-сторінка, то інше, і я ПОВИННА називати цю змінну. Як це можливо?
    додано Автор user2413035, джерело
    так, вибачте. Не знаю, що це так просто! спасибі
    додано Автор user2413035, джерело

    A stupid answer : create a tag, and set its href attribute to the correct value.

    Інакше:

    Стандартний спосіб зберігання пар ключ: значення у JavaScript - це використання простого об'єкта:

    var urls = {};
    urls['about'] = 'mysuperduperurlforabout.html';
    
    function loadPage(target) {
        var url = urls[target];
        //maybe check if url is defined ?
    
        $('#dashboard').load(url);
    }
    
    1
    додано
    Друге рішення виглядає здорово :) Спасибі +1
    додано Автор user2413035, джерело

    Ви можете помістити "про" як посилання на об'єкт або масив, подібне до:

    var pageReferences = [];
    pageReferences["about"] = "about.html";
    
    var otherReference = {
        "about": "about.html"
    };
    
    function loadPage(target) {
        alert(pageReferences[target]);
        alert(otherReference[target]);
        $("#dashboard").load(target);
    }
    
    $(".nav li").click(function() {
        loadPage($(this).attr("class"));
    });
    

    Обидва цих сповіщення попередить "about.html" про посилання на відповідні об'єкти.

    EDIT: Якщо ви хочете заповнити об'єкт на основі розмітки, ви можете зробити:

    var otherReference = {};
    
    $(document).ready(function() {
        $('.nav').find('li').each(function() {
            var me = $(this).attr('class');
            otherReference[me] = me + ".html";
        });
    });
    

    Можна навіть зберегти розширення в додатковому атрибуті:

    var otherReference = {};
    
    $(document).ready(function() {
        $('.nav').find('li').each(function() {
            var me = $(this).attr('class');
            otherReference[me] = me + "." + $(this).attr("extension");
        });
    });
    

    Краще було б просто покласти посилання на сторінку в елемент даних:

  • Howdy
  • $(".nav li").click(function() {
        loadPage($(this).data("pagetoload"));
    });
    
    0
    додано
    @nnnnnn Так, масив цей шлях не найкращий, але це можливо :)
    додано Автор Mark Schultheiss, джерело
    Не використовуйте масив, якщо ви не використовуєте цифрові клавіші. var pageReferences = {}; було б правильним для цієї мети.
    додано Автор nnnnnn, джерело
    $(".nav li").click(function(){
        loadPage($(this).attr("class") + ".html");
    });
    

    або

    $("#dashboard").load(target+".html");
    
    0
    додано
    $(".nav li").click(function(){
        loadPage($(this).attr("class") + ".html");
    });
    

    або

    $("#dashboard").load(target+".html");
    
    0
    додано

    Ви можете викликати такі змінні (якщо ви просили):

    var test = 'we are here';
    var x = 'test';
    console.log(window[x]);
    

    Це схоже на $$ в PHP. Вихідні дані будуть:

    we are here in the console window.

    0
    додано
    Зверніть увагу, що це працює тільки, якщо змінні глобальні.
    додано Автор nnnnnn, джерело
    @smerny Вставте код вище у вашу консоль і спробуйте ...
    додано Автор Дамян Станчев, джерело

    Ви можете викликати такі змінні (якщо ви просили):

    var test = 'we are here';
    var x = 'test';
    console.log(window[x]);
    

    Це схоже на $$ в PHP. Вихідні дані будуть:

    we are here in the console window.

    0
    додано
    Зверніть увагу, що це працює тільки, якщо змінні глобальні.
    додано Автор nnnnnn, джерело
    @smerny Вставте код вище у вашу консоль і спробуйте ...
    додано Автор Дамян Станчев, джерело
    ІТ КПІ - JavaScript
    ІТ КПІ - JavaScript
    504 учасників

    співтовариство javascript розробників в Telegram