Установить идентификатор строки объекта ID Параметры Javascript

Question

Я начинаю кодирование с помощью HTML, CSS и Javascript, и у меня есть проблема. У меня есть Blogger, и мои сообщения обычно содержат много контента, поэтому мне было интересно разделить мои сообщения, «классифицируя их» и использовать что-то вроде Spoiler. Итак, я использую некоторые ДИВ тег так же, как выше

<div style="background-color:rgb(0, 0, 0);"> 
 
    <p style="font-family:Segoe UI Light; color:white; vertical-align:middle; font-size:16px;"> 
 
     <img id="icon_1" src="show.png" 
 
     style="width:20px; height:20px; margin:2px; vertical-align:middle;">Example</img> 
 
    </p> 
 
</div> 
 
<div id="cont_1" style="display: none;"> 
 
    <p>just some stuff for an example<br/> 
 
    content will be placed on this div</p> 
 
    <p>I have set a default ID string, but don't know If I will need it at all</p> 
 
</div>

Как вы можете видеть, у меня есть главного DIV, который содержит изображение (значок, связанный, чтобы показать/скрыть) и строковый ввод. Затем у меня есть еще один класс div, где будет размещен контент. Я установил и id, в этом примере cont_1. Кроме того, при загрузке этот div будет свернут/спрятан, поэтому я установил display: none;. Вы также можете увидеть, что img tag имеет идентификатор icon_1 Далее я построил класс JavaScript. Там, я установлю cont_1 дисплей стиля до блок; и я также хочу, чтобы изменить изображение SRC

Это мой код сценария

<script> 
 
      function click1(item, ico) 
 
      { 
 
       var a = document.getElementById(item); 
 
       if (a.style.display == 'block') { 
 
\t \t \t \t \t a.style.display = 'none'; 
 
\t \t \t \t \t \t icon_change(ico, "hide") 
 
\t \t \t \t } 
 
         
 
        else { 
 
\t \t \t \t \t \t a.style.display = 'block'; \t \t 
 
       \t \t icon_change(ico, "show") 
 
\t \t \t \t \t } 
 
         
 
      } 
 
\t \t \t 
 
\t \t \t function icon_change(ico, visibility) 
 
      { 
 
       var image = document.getElementById(icon); 
 
\t \t \t \t var s = visibility; 
 
       if (s == "hide") { 
 
\t \t \t \t 
 
         image.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAA20lEQVRoQ+2YUQ7CIBBE2ZNZT66eDDExxmKajpMuMfj6S1k6b6cTIMokT0yioyDk1zqZ2pFa6+VdcEScswBkC6mdkLT10go/BLSOIORbC9IRhRjWUih172AtBRrWUihhLYMS1jKgkVoKNKylUCK1DEpYy4D2kVqN4rXVORm1Rk65tWPzsjp99qsjZGQ/SvmjjhwJltQyaLLXUqBhLYUSey2DEtYyoJFaCjSspVAitQxKWMuARmop0LCWQonUMig9LzJeM/ubD6Pk5pTUn/3ID92rhZA9QqPHp+nIHUEJrDNSwO0mAAAAAElFTkSuQmCC"; 
 
        } 
 
\t \t \t \t  
 
\t \t \t \t else { 
 
\t \t \t \t  \t \t image.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAqklEQVRoQ+2UUQ6CMADF2Mn06Hqy4SfRv4YGMsv/K6xdGNsiz1jkHFsHuVvJilREMtDVksRibEWwOmlYEUksxlYEq5OGFZHEYmxFsDppWBFJLMZWBKuThj9F5pyvz7se0vvOwr7HGM8jrIOcpRZy/qgINHT5rN/v5Qm+PqAiFZEMdLUksRhbEaxOGlZEEouxFcHqpGFFJLEYWxGsThpWRBKLsRXB6qThMkV2e2UUM4Y5sY4AAAAASUVORK5CYII="; 
 
\t \t \t \t } 
 
\t \t \t \t \t \t 
 
       
 
      } 
 
\t \t \t 
 
</script>

Да .. мой код не очень организованный и, возможно, я просто нужна одна функция чтобы выполнить задачу, я пробовал это и не работал тоже. . Моя проблема связана с функцией ID в JavaScript, что должно быть проблемой для моего кода. Я хотел бы иметь одну или две функции javascript для работы с несколькими div, divs, которые содержат контент и будут отображаться и скрываться. Я использую OnClick, как этого

<div Onclick="click1(content_1, icon_1)"/>

Итак, я попытался установить два параметр в JavaScript, один это DIV ID и друг изображения ID Я вставляю его как String, должен ли я это сделать? Вы знаете какой-нибудь более простой способ сделать это? Я хотел бы посмотреть, есть ли более простые альтернативы :)

Спасибо! Это мой пост и надеюсь, что это достаточно ясно.

Answer 1

Я думаю, проблема у вас там в том, что ваши параметры не называются строкой.Оно должно быть:

<div Onclick="click1('content_1', 'icon_1')"/> 

Вы могли бы упростить это так:

function click1(which_div) 
      { 
       var a = document.getElementById("content_"+which_div); 
       var image = document.getElementById("icon_"+which_div); 

       if (a.style.display == 'block') { 
        a.style.display = 'none'; 
        image.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAA20lEQVRoQ+2YUQ7CIBBE2ZNZT66eDDExxmKajpMuMfj6S1k6b6cTIMokT0yioyDk1zqZ2pFa6+VdcEScswBkC6mdkLT10go/BLSOIORbC9IRhRjWUih172AtBRrWUihhLYMS1jKgkVoKNKylUCK1DEpYy4D2kVqN4rXVORm1Rk65tWPzsjp99qsjZGQ/SvmjjhwJltQyaLLXUqBhLYUSey2DEtYyoJFaCjSspVAitQxKWMuARmop0LCWQonUMig9LzJeM/ubD6Pk5pTUn/3ID92rhZA9QqPHp+nIHUEJrDNSwO0mAAAAAElFTkSuQmCC"; 

       } 

        else { 
         a.style.display = 'block';  
         image.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAqklEQVRoQ+2UUQ6CMADF2Mn06Hqy4SfRv4YGMsv/K6xdGNsiz1jkHFsHuVvJilREMtDVksRibEWwOmlYEUksxlYEq5OGFZHEYmxFsDppWBFJLMZWBKuThj9F5pyvz7se0vvOwr7HGM8jrIOcpRZy/qgINHT5rN/v5Qm+PqAiFZEMdLUksRhbEaxOGlZEEouxFcHqpGFFJLEYWxGsThpWRBKLsRXB6qThMkV2e2UUM4Y5sY4AAAAASUVORK5CYII="; 

        } 

      } 

И вы называете это так:

<div Onclick="click1('1')"/> 

Answer 2

Я создал следующий фрагмент кода, который дает такую ​​же функциональность/как вы ожидаете, но реализовано немного по-другому.

Надеюсь, что это решит вашу проблему. Вы можете проверить/воспроизвести это на JSFiddle.

<figure onclick="showHide('show');" id="show"> 
    <img src="http://bioinformatica.upf.edu/2009/projectes09/Ex/resultats/seli/SelI_human_pfam_files/showButton.png" alt="An awesome picture"> 
    <figcaption>Show</figcaption> 
</figure> 

<figure onclick="showHide('hide');" id="hide" style="display:none;"> 
    <img src="http://tweetingmeeting.com/images/hide-button.png"> 
    <figcaption>Hide</figcaption> 
</figure> 


<div id="cont_1" style="display:none;"> 
    <p>just some stuff for an example<br/> 
     content will be placed on this div</p> 
    <p>some more content.....</p> 
</div> 


<script> 
function showHide(activity) 
{ 
    show = document.getElementById("show"); 
    hide = document.getElementById("hide"); 
    content = document.getElementById("cont_1"); 

    // a.style.display = "none"; 
    if(activity == "show") 
    { 
     show.style.display = "none"; 
     hide.style.display = "block"; 
     content.style.display = "block"; 
    } 
    else if(activity == "hide") 
    { 
     show.style.display = "block"; 
     hide.style.display = "none"; 
     content.style.display = "none"; 
    } 
} 
</script>