2016-02-03 4 views
0

Моя цель - создать функцию, которая может быть вызвана в разных точках страницы, чтобы некоторые элементы <p> исчезли и снова появились. Зритель сможет щелкнуть ключевые слова в абзаце, чтобы отобразить элементы ниже.Как передать строковую переменную через эту функцию java-скрипта, а затем в getElementById()?

Я сделал что-то подобное в другом блоке кода, но он требует, чтобы я делал новую функцию каждый раз, когда я ее использую. И я могу потенциально иметь 15-20 раз, мне нужно позвонить ему на одной странице.

Ниже приведен код, который я написал. «Состояние» - это то, что я использую, чтобы убедиться, что процессор попадает в мои циклы. У меня был некоторый опыт работы с Java, но я не очень хорошо разбираюсь, поэтому мне нужны такие мелочи.

Это работает отлично, но только за один раз. Поскольку я должен установить переменную «скрытый» как конкретный идентификатор объекта, который я хочу, он делает его одноразовым. Это означало бы, что мне нужно несколько функций. Я хотел бы просто передать имя id в функцию как параметр, чтобы функцию можно было вызвать для разных объектов.

И вот что я пытаюсь сделать, чтобы исправить свою проблему, но ничего не работает. Я не уверен, что это потому, что getElementById() не распознает мою переменную как строку или если я не объявляю параметр правильно.

<!doctype html> 
<html> 
<head> 

    <style> 

    a {color: red; } 

    </style> 

</head> 

<body> 

<p id="currentState">Not set yet</p> 

<p>Within this paragraph, <a onclick="myFunction("hidden1")">THIS</a> is what you click.</p> 

<p id="hidden1">This is supposed to be hidden</p> 



<script> 

    var state; 

    function myFunction(name) { 

     var hidden = document.getElementById(name); 

     if (hidden.style.display != "none"){ 
      hidden.style.display = "none"; 
      state = "State: Visible"; 

     } 

     else if (hidden.style.display == "none"){ 
      hidden.style.display = "block"; 
      state = "State: Hidden"; 

     } 


     document.getElementById("currentState").innerHTML = state; 



    } 

</script> 

</body> 
</html> 

Я думаю, что что-то от этой линии: <a onclick="myFunction("hidden1")">THIS</a> Похоже, что, когда моя программа говорит, что я синтаксическая ошибка. Я не уверен, что это. Любая помощь очень ценится!

+0

могли бы вы поставить образец ваших элементов "р", а элементы скрываться? – dexhering

ответ

2
<a onclick="myFunction("hidden1")"> 

Первый " начинается значение атрибута HTML.

Вторым " заканчивается значение атрибута HTML.

Если вы хотите ", как данные в атрибуте разделителей с ", то вы должны использовать объект, такие как &quot;.

В качестве альтернативы, переключитесь на использование '.

Еще не сказано, bind your event handlers using JavaScript. Это будет separate your markup from your logic и избавит вас от некоторых из the weirdness that is intrinsic event attributes.

0

Вот ответ с помощью JQuery:

В вашем HTML:

... <a href="#" class="hiddenTrigger" data-target="hidden1">THIS</a> ... 

... <p id="hidden1"> ... 

В вашем JavaScript:

$('.hiddenTrigger').click(function() { 
    var target = $(this).data('target'); 
    $('#'+target).show(); 
}); 
Смежные вопросы