Можно ли использовать объект $(this ) для указания на функцию

ProgramBox

Можно ли использовать объект $(this ) для указания на функцию

Post author:admin
Запись опубликована:30 марта, 2023
Post category:Вопросы по программированию

#jquery #function #this #onchange #function-parameter

#jquery #функция #это #onchange #функция-параметр

Вопрос:

У меня есть код, приведенный ниже:

     function showHideOptions() {
        $("#template1, #template2, #template3, #template4").css("display","none");
        $(this).css("display","block");
}

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

     <select id="masterdropdown">
        <option>T1</option>
        <option>T2</option>
        <option>T3</option>
        <option>T4</option>
    </select> 


<select id="template1" onchange="return showHideOptions();">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 


<select id="template2"  onchange="return showHideOptions();">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 

<select id="template3" onchange="return showHideOptions();">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 


<select id="template4" onchange="return showHideOptions();">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select>

CSS:

 #template1, #template2, #template3, #template4{display:none;}

В принципе, у меня есть выпадающий список top (masterdropdown), который всегда виден, это также селектор шаблонов, при выборе его параметров я хочу показать конкретный шаблон drodown, который соответствует этому выбранному параметру в masterdropdown. Как этого можно достичь в jquery. $(this) не работает в этом случае, будучи вызванным из функции.

Ответ №1:

Смотрите рабочую демонстрацию http://jsfiddle.net/X5mWL /

 $(function(){
        $("#masterdropdown").change(function() {
            $("#template1, #template2, #template3, #template4").hide();
            $($("#masterdropdown").val()).show();
    });
});

HTML

  <select id="masterdropdown">
        <option value="#template1">T1</option>
        <option value="#template2">T2</option>
        <option value="#template3">T3</option>
        <option value="#template4">T4</option>
    </select> 


<select id="template1">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 


<select id="template2">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 

<select id="template3">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select> 


<select id="template4">
        <option>Template1</option>
        <option>Template2</option>
        <option>Template3</option>
        <option>Template4</option>
    </select>

1. почему вы используете nowrap (body) для jquery., Как это меняется по сравнению с Dom Ready

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

3. кстати, чем это отличается от onDomReady и в чем разница в использовании $(«document»).ready(функция() { //материал здесь }) Могу ли я использовать $ (функция () {}) только один раз на моей странице И $(функция () { //материал здесь })

4. $("document").ready(function() { //stuff here }) и $(function() { //stuff here }) одинаковы, вы можете использовать их несколько раз, и jQuery объединяет их. onDomReady это jsfiddle, который такой же, как $(document).ready() . nowrap(body) просто выводит JS в теле.

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

Ответ №2:

         <script>
        $(document).ready(function() {
          $('#masterdropdown').showHideOptions().change();
        });

        $.fn.showHideOptions = function() {
         this.change(function() {
           $(".templateDropdowns").hide();
           $('#'   $(this).val()).show();
        });
        return this;
        };

        </script>

        <select id="masterdropdown">
        <option value="template1">template1</option>
        <option value="template2">template2</option>
        <option value="template3">template3</option>
        </select>  
        <select id="template1" class="templateDropdowns">
         <option>ta</option>
         <option>tat</option>
        </select>
        <select id="template2" class="templateDropdowns">
        <option>ete</option>
        <option>eTee</option>
        </select>
        <select id="template3" class="templateDropdowns">
        <option>Te</option>
        <option>Tet</option>
        </select>

Ответ №3:

Прикрепите обработчик события изменения к вашему главному раскрывающемуся списку.

В нем просто отметьте значение select и покажите / скройте соответствующие выпадающие списки.

Что-то вроде этого (немного устаревшее в javascript)

$(«masterdropdown»).change(функция() {

 $("#template1, #template2, #template3, #template4").hide();
var selText = $(this).search("option:selected").text();
if(selText == 'T1') $("#template1").show();
if(selText == 'T2') $("#template2").show();
if(selText == 'T3') $("#template3").show();
if(selText == 'T4') $("#template4").show();

});