консолидировать функцию javascript, передав переменную из идентификатора объекта html, например, кнопку ID

Попытка объединить эти три вспомогательные функции в одну подфункцию, пройдя через переменную от самой кнопки. В настоящее время у меня есть четыре кнопки, и каждая кнопка запускает основную функцию. Внутри основной функции у меня есть три подфункции, которые изменяют содержимое div с одной из трех новых переменных html. Таким образом, каждая кнопка может затем изменить div на свой собственный контент. Этот код теперь работает для меня без проблем, но я считаю, что должен быть способ просто сделать эту подфункцию только одной функцией вместо трех, установив переменную .replaceWith в глобальную переменную. Внутри функции будет геттер, который проверяет идентификатор кнопки, которая была нажата, и передает ее вместо этого replaceWith.консолидировать функцию javascript, передав переменную из идентификатора объекта html, например, кнопку ID

<script> 
$(document).ready(function(){ 
    $("button.first").click(function(){ 
     $('div.switchMeOut').replaceWith(firstHTML); 
    }); 
    $("button.second").click(function(){ 
     $('div.switchMeOut').replaceWith(secondHTML); 
    }); 

    $("button.third").click(function(){ 
     $('div.switchMeOut').replaceWith(thirdhtml); 
    }); 

}); 
var firstHTML = '<div class="switchMeOut"><p>First Section Content</div>'; 
var secondHTML = '<div class="switchMeOut"><p>Second Section Content</div>'; 
var thirdHTML = '<div class="switchMeOut"><p>Third Section Content</div>'; 
</script> 


<body> 
<div id="parentblock"> 
    <h5>Contacts List</h5> 
    <div class="switchMeOut"> 
    <script> document.write (firstHTML + seconcHTML + thirdHTML); </script> 
    </div> 
</div> 

<button id="firstHTML" class="swapper first">Shows First Only </button> 
<button id="seconcHTML" class="swapper second">Shows Second Only </button> 
<button id="thirdHTML" class="swapper third">Shows Third Only </button> 
</body>

Итак, вот что я думаю, должно быть следующим, но я определенно чего-то не хватает.

<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
     // some code here to get the buttons ID element 
     // and possibly set a variable to that buttons id. 
     var passThis = button#; 
     $('div.switchMeOut').replaceWith(passThis); 
    }); 
});

Затем каждая кнопка имеет свой идентификатор. Например:

<button id="firstHTML" class="swapper first">Shows First Only </button>

Любая помощь по этому вопросу будет иметь в виду, я не совсем понимаю, что я здесь отсутствует, но я чувствую, что это довольно близко.

Спасибо!

источник

2015-12-03 loganpixel

У вас есть скрипка или что-то, чтобы показать, что это не работает? Похоже, вы поняли это. – m0meni

Да, я нашел идентификатор кнопки только с этим (this.id) и могу даже сказать «var passThis = this.id», но когда я добавляю это в replaceWith, он просто выдает идентификатор кнопок ... так что его немного ближе. следующая часть должна затем связать весь этот html с этим идентификатором кнопок? – loganpixel

Вы просите помощи в получении идентификатора нажатой кнопки? –

Вы можете получить идентификатор щелкнутого элемента, как это:

var passThis = $(this).attr("id");

Но я думаю, что вам нужно сделать, это тоже:

var htmls = { 
    firstHTML: '<div class="switchMeOut"><p>First Section Content</div>', 
    secondHTML: '<div class="switchMeOut"><p>Second Section Content</div>', 
    thirdHTML: '<div class="switchMeOut"><p>Third Section Content</div>' 
}

И тогда ваше заявление переключения будет выглядеть это:

$('div.switchMeOut').replaceWith(htmls[passThis]);

Относительно ваших комментариев:

htmls не является массивом, его объектом. Это называется объектом в javascript, но люди также называют их словарями, хешами, ассоциативными массивами, парами ключ/значение и т. Д. См.: https://en.wikipedia.org/wiki/Associative_array

Также вы не можете «вызвать» массив или объект. Вы вызываете функцию. Лучший способ выразить это: «Я получил/получил значение в индексе 3» для массивов и «Я получил/получил свойство firstHtml» для объектов.

источник

2015-12-03 16:27:56

Спасибо, что сделал трюк! Итак, вы превратили разделы в массив, – loganpixel

Нет проблем. Можете ли вы отметить этот ответ правильно? –

На самом деле это не массив. Это объект, но он использует специальный синтаксис с квадратными скобками, который позволяет передавать строку. Вы также можете получить доступ к свойствам, используя 'htmls.firstHTML',' htmls.secondHTML' и т. Д. 'Htmls.firstHtml' то же самое, что и' htmls ["firstHtml"] ' –

-1

Вы можете использовать "eval ('variablename'), чтобы получить значение переменной. Однако вы также можете использовать eval для получения ссылки на объект с этим идентификатором" eval ('id') ". что нужно сделать, это изменить идентификатор ваших кнопок на атрибут данных. Вместо «id = 'firstHTML» сделать его «data-id =« firstHTML »». Так что, когда вы eval («firstHTML»), вы знаете, что вы имеете в виду переменная, а не объект кнопки.

И вы можете избавиться от тега встроенного скрипта в div «switchMeOut» и загрузить его, используя jquery в той же функции document.ready.

Heres скрипка, показывая его работать: http://jsfiddle.net/ub8wz5Lb/

HTML:

<div id="parentblock"> 
    <h5>Contacts List</h5> 
    <div class="switchMeOut"> 
    </div> 
</div> 

<button data-id="firstHTML" class="swapper first">Shows First Only </button> 
<button data-id="secondHTML" class="swapper second">Shows Second Only </button> 
<button data-id="thirdHTML" class="swapper third">Shows Third Only </button>

Javascript:

var firstHTML = '<div class="switchMeOut"><p>First Section Content</div>'; 
var secondHTML = '<div class="switchMeOut"><p>Second Section Content</div>'; 
var thirdHTML = '<div class="switchMeOut"><p>Third Section Content</div>'; 

$(document).ready(function(){ 
    $("button").click(function(){ 
     var id = $(this).data("id"); 
     $('div.switchMeOut').html(eval(id)); 
    }); 
    $('div.switchMeOut').html(firstHTML + secondHTML + thirdHTML); 
});

источник

2015-12-03 16:40:16

Зачем использовать eval, если есть другие решения? Eval неэффективен, трудно отлаживается и подвержен атакам XSS. См. Http://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea –

консолидировать функцию javascript, передав переменную из идентификатора объекта html, например, кнопку ID

ответ

Смежные вопросы