Как получить ссылку, которая получает данные через ajax, а затем изменяется, чтобы данные могли быть скрыты?

Question

Я использую asp mvc 2, и у меня есть страница, на которой есть некоторые данные, и у меня есть ссылка, которая выполнит запрос ajax, чтобы получить некоторые данные и опубликовать их в div на странице.

как только у меня появятся данные, я бы хотел, чтобы что-то стало видимым, и я мог бы щелкнуть, чтобы переключить видимость div, содержащего данные, чтобы пользователь мог показать / скрыть эту дополнительную информацию, но я нехочу, чтобы исходная ссылка была больше видимой.

Я не возражаю, если исходная ссылка изменит то, что она делает, например, перед загрузкой данных она говорит: «Показать данные», затем, как только она загружена, она меняетсяна «Скрыть данные», и если он скрыт, он снова изменится на «Показать данные», а если снова щелкнуть по нему, то просто снова отобразится div (хотя перезагрузка данных из вызова ajax не станет концом света)

Мои веб-фу и jQuery-фу не сильны.Как я могу получить то, что я хочу?Я бился головой об эту стену без какого-либо действительно удовлетворительного решения в течение дня или около того и теперь чувствую, что, должно быть, что-то упускаю в моем понимании того, как все работает.

Answer 1

Что-то вроде этих строк должно работать:

<a href="#" id="myToggler">Show</a>
<div id="myDiv">
</div>

<script type="text/javascript">
    $('#myToggler').click(function() {
        var link = $(this);
        var content = $('#myDiv');
        if(!content.data('isLoaded')) {
            content.load('path/to/something', function() {
                content.data('isLoaded', true);
            });
        }
        content.toggle(function() {
            if(content.is(':visible')) {
                link.text('Hide');
            } else {
                link.text('Show');
            }
        });
        return false;
    });
</script>

Обновление

Вы указали, что у вас будет много областей контента с переключающими ссылками на одной странице, поэтому небольшое изменение в HTMLи сценарий выше должен сделать трюк:

<div class="content-wrapper">
    <a href="#" class="toggler">Show</a>
    <div class="content">
    </div>
</div>

<script type="text/javascript">
    $('.toggler').click(function() {
        var link = $(this);
        var parent = link.parent('.content-wrapper');
        var content = parent.find('.content');
        if(!content.data('isLoaded')) {
            content.load('path/to/something', function() {
                content.data('isLoaded', true);
            });
        }
        content.toggle(function() {
            if(content.is(':visible')) {
                link.text('Hide');
            } else {
                link.text('Show');
            }
        });
        return false;
    });
</script>