Jquery: переключение div с помощью механизма и щелчка изображения

Question

В настоящее время я работаю с функцией переключателя div. Я использую изображения, чтобы быть триггером для переключения. Например, когда div близок, появляется изображение со знаком «плюс», указывающее пользователю на расширение и наоборот для сжатия div. единственная проблема заключается в том, что я использую два набора изображений для расширения и сжатия div, но я могу получить только набор для работы, но не оба. Вот пример, который у меня не очень хорошо работает в jsfiddle, но если вы хотите посмотреть на него, вот ссылка: http://jsfiddle.net/sQnd9/4/

Вот мой пример:

<script type="text/javascript">
function toggle1(showHideDiv, switchImgTag) {
        var ele = document.getElementById(showHideDiv);
        var imageEle = document.getElementById(switchImgTag);
        if(ele.style.display == "block") {
                ele.style.display = "none";
        imageEle.innerHTML = '<img src="images/Plus_Circle.png"/>';

        }
        else {
                ele.style.display = "block";
                imageEle.innerHTML = '<img src="images/Minus_Circle.png"/>';

        }
}
</script>

<script type="text/javascript"> 

function toggle2(showHideDiv2, switchImgTag2) { 
        var ele = document.getElementById(showHideDiv2); 
        var imageEle = document.getElementById(switchImgTag2); 
        if(ele.style.display == "block") { 
                ele.style.display = "none"; 
        imageEle.innerHTML = '<img src=images/arrow_open.png/>'; 
        } 
        else { 
                ele.style.display = "block"; 
                imageEle.innerHTML = '<img src=images/arrow_close.png/>'; 
        } 
} 
</script> 


<div><a id="imageDivLink" href="javascript:toggle1('contentDivImg', 'imageDivLink');"><img src="images/Plus_Circle.png";/></a>Example</div>  
<br />
       <div id="contentDivImg" style="display:none;">
       Example1-Content
       </div>


<div><a id="imageDivLink2" href="javascript:toggle2('contentDivImg2', 'imageDivLink2');"><img src="images/Plus_Circle.png";/></a>Example2</div>  
<br />
       <div id="contentDivImg2" style="display:none;">
       Example2-Content
       </div>

Answer 1

Проблема не в вашем коде (кроме ошибок, которые указал @appclay). Проблема в jsfiddle. Просто посмотрите на исходный код, который он производит. Когда вы помещаете что-либо в раздел «javascript», оно помещает его в свое собственное пространство имен, предотвращая доступ к этим именам функций за пределами этого блока (поэтому ваш вызов toggle1, например, вызвал неопределенную ошибку функции).

Вы можете увидеть это в действии, определив эти функции непосредственно как window. свойства. Тогда ваш код работает как положено. Смотри http://jsfiddle.net/sQnd9/7/

В вашем собственном коде вы, вероятно, не будете инкапсулировать эти имена функций в их собственную область, и это будет работать так, как ожидается (но еще раз учтите, что вы должны внести изменения, указанные @appclay).

Кроме того, вы, вероятно, не должны делать это так или иначе. Вы должны прикрепить обработчики событий в блоке javascript.

Answer 2

Вы пропустили кавычки атрибута img src во втором

Вы также ссылаетесь на первую функцию в обоих примерах, поэтому вторая функция никогда не вызывается ... Попробуйте изменить:

<div><a id="imageDivLink2" href="javascript:toggle1('contentDivImg2', 'imageDivLink2');"><img src="images/Plus_Circle.png";/></a>Example2</div>

до

<div><a id="imageDivLink2" href="javascript:toggle2('contentDivImg2', 'imageDivLink2');"><img src="images/arrow_open.png" /></a>Example2</div>

Кроме того, я не знаю, почему в ваших тегах img есть точки с запятой, их не должно быть.