Прикрепить (показать / скрыть текст) динамически и при нажатии показать / скрыть набор полей ниже - PullRequest
Новая
       21

Прикрепить (показать / скрыть текст) динамически и при нажатии показать / скрыть набор полей ниже

1 голос
/ 20 августа 2009

Я хочу прикрепить (показать / скрыть текст) динамически к диапазону, и при нажатии на этот конкретный текст я хочу иметь эффект показать / скрыть набор полей ниже. Я достиг задачи отображения / скрытия текста, добавляемого в span. Но проблема возникает, когда я нажимаю на этот текст. Ничего не происходит, за исключением того, что текст рядом с span изменяется.

HTML: 

<span>Store Dropdown</span>
<fieldset id="fieldset-store" class="showHide">
    <legend>Choose by item:</legend>
    <label for="prodtype">Type:</label>
    <select name="prodtype" id="prodtype">
        <option value="0" selected="selected">Choose type</option>                  
        <option value="1"> Sample1</option>
        <option value="2"> Sample2</option>
        <option value="3"> Sample3</option>
        <option value="4"> Sample4</option>
    </select> 
    <label for="brandtype">of:</label>
    <select name="brandtype" id="brandtype">                
        <option value="0" selected="selected">Choose brand</option>                 
        <option value="1"> Brand1</option>
        <option value="2"> Brand2</option>
        <option value="3"> Brand3</option>
        <option value="4"> Brand4</option>
    </select>
    <label for="prodprice">Price:</label> <input id="prodprice" name="prodprice" value="" type="text">
</fieldset>

JS код: 

$(document).ready(function(){
    $(".showHide").prev().append(' <a href="#" class="showHideLink">Show</a>');
    $(".showHide").hide();
    $('a.showHideLink').click(function() {
        if ($(this).html()=='Show')
            $(this).html('Hide');
        else 
            $(this).html('Show');
        $(this).next().toggle('slow');
        return false;
    });
});

Просьба предложить мне, какие изменения мне нужно сделать. Заранее спасибо

1 Ответ

1 голос
/ 20 августа 2009 
$(document).ready(function(){
            $(".showHide").prev().append(' <a href="#" class="showHideLink">Show</a>');
            $(".showHide").hide();
            $('a.showHideLink').click(function() {
                if ($(this).html()=='Show')
                        $(this).html('Hide');
                else
                        $(this).html('Show');
                $(".showHide").toggle('slow');
                return false;
            });
        });

или 

$(document).ready(function(){
                $(".showHide").prev().append(' <a href="#" class="showHideLink">Show</a>');
                $(".showHide").hide();
                $('a.showHideLink').click(function() {
                    if ($(this).html()=='Show')
                            $(this).html('Hide');
                    else
                            $(this).html('Show');
                    $(this).parent().next().toggle('slow');
                    return false;
                });
            });
...