AJAX innerHTML. Изменить ссылки. Возможно "или" проблема

Question

То, что я хочу, это гиперссылка Больше, при нажатии на которую запускается некоторая функция javascript, а также изменяется гиперссылка Меньше. Вот то, что у меня есть, который не работает. Он хорошо выполняет функцию ajaxpage, но не moreToLess. Я думаю, что мое использование "и" в JavaScript.

<script type="text/javascript">
function moreToLess(){
document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage('/TagCloud?id=EDI_0009&count=20', 'tagcloud');lessToMore()" >Less</a>';
}
function lessToMore(){
document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage('/TagCloud?id=EDI_0009&count=50', 'tagcloud');moreToLess()" >More</a>';
}
</script>
<span id=tagLinks ><a href=# OnClick="ajaxpage('/TagCloud?id=EDI_0009&count=50', 'tagcloud');moreToLess()" >More</a></span>

Answer 1

Это действительно проблема с кавычками, вы можете экранировать символ \ с помощью символа \ 1001 *

<script type="text/javascript">
function moreToLess(){
document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=20\', \'tagcloud\');lessToMore()" >Less</a>';
}
function lessToMore(){
document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=50\', \'tagcloud\');moreToLess()" >More</a>';
}
</script>
<span id=tagLinks ><a href=# OnClick="ajaxpage('/TagCloud?id=EDI_0009&count=50', 'tagcloud');moreToLess()

Answer 2

Вы должны экранировать символы ' внутри цитаты:

'<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=20\', \'tagcloud\');lessToMore()" >Less</a>'

Answer 3

Я не уверен, что что-то не так, но я думаю, что вам нужно избегать ваших одинарных кавычек, которые находятся внутри других одинарных кавычек:

document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=20\', \'tagcloud\');lessToMore()" >Less</a>\';

Answer 4

Да, просто избегайте одинарных кавычек внутри двойных кавычек, которые есть в вашем javascript .. ala \ '

<script type="text/javascript">
    function moreToLess(){
        document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=20\', \'tagcloud\');lessToMore()" >Less</a>';
    }
    function lessToMore(){
        document.getElementById('tagLinks').innerHTML = '<a href=# OnClick="ajaxpage(\'/TagCloud?id=EDI_0009&count=50\', \'tagcloud\');moreToLess()" >More</a>';
    }
</script>
<span id=tagLinks ><a href=# OnClick="ajaxpage('/TagCloud?id=EDI_0009&count=50', 'tagcloud');moreToLess()" >More</a></span>

Answer 5

Такого рода путаница является причиной того, что innerHTML не всегда является победой. У вас есть JavaScript, встроенный в HTML, встроенный в строковый литерал JavaScript, встроенный в дополнительный HTML, неудивительно, что вы запутались.

Вот более простая версия, основанная на переключении ссылки с помощью методов DOM.

<a id="tagLinks" href="/TagCloud?id=EDI_0009&amp;count=50">more...</a>

<script type="text/javascript">
    var ismore= false;
    document.getElementById('tagLinks').onclick= function() {
        ajaxpage(this.href);
        ismore= !ismore;
        this.href= '/TagCloud?id=EDI_0009&count='+(ismore? 20 : 50);
        this.firstChild.data= ismore? 'less...' : 'more...';
        return false;
    };
</script>