변경 기능을 사용하는 javascript 키워드 사용 방법

Question

변경 기능을 사용하는 데 문제가 있습니다. 나는 2 개의 서로 다른 드롭 다운이 서로 붙어있다. 첫 번째 변경 사항이 변경되면 두 번째 변경 사항도 변경됩니다. 나는 jquery ajax를 사용하여 그것을했다. 하지만 ID를 사용하면 jquery는 한 번만 작동 할 수 있습니다. 그래서 나는 javascript의 this, parent 및 children 키워드에 대한 연구를했지만 적절한 방법을 찾을 수 없습니다.

는 나의 자바 스크립트는 다음과 같다 :

<script> 
      $(document).ready(function() { 
      // alert('js working'); 
      $(".catSelectedClass").change(function() { 
       // alert('i'm inside the function dude'); 
       function ustCat() {   
        alert(this); 
        var mainCatID = $(this).val(); 
        alert('mainCatID captured'); 
        var id = $(this).parent().$(".catIDClass").val(); 
        // alert(id); 
        // alert(mainCatID); 
        $.ajax({ 
         type: "POST", 
         url: "panel/catGroupPost.php", 
         data: {id: id, mainCatID: mainCatID} 
        }).done(function(data) { 
         var responseData = data; 

         alert(responseData); 
         $('#subCat').html($(data)); 

        }); 
       } 
       ustCat(); 
      }); 
      $(".subCatClass").change(function() { 

       function subCat() { 
        var mainCatID = $(this).val(); 
        var id = $('#catID').val(); 

        $.ajax({ 
         type: "POST", 
         url: "panel/subCatPost.php", 
         data: {id: id, mainCatID: mainCatID} 
        }).done(function() { 
         alert('its done. its gone. Yes Mr.Frodo. Its all over now !!'); 
        }); 
       } 
       subCat(); 
      }); 
     }); 

    </script> 

그리고 이것은 얼마나 채우기 드롭 다운 :

while ($cat = mysql_fetch_array($cat_query)) { 


$catTable.= '<label>' . $cat['name'] . '</label>'; 
$catTable.= '<div class="catContainer"><div id="catPost" class="catPostClass">'; 
$catTable.= '<input type="text" id="catID" class="catIDClass" value="' . $cat['id'] . '"><select id="catSelected" class="catSelectedClass" name="catSelected"><option value="0">Seçiniz...</option>' . catOption($cat['mainCatID']) . '</select></div>'; 
$kategoriTablosu.= '<div id="subCat"><select id="subCatID" class="SubCatClass"><option value="0">Seçiniz...</option>' . subCatOption($cat['mainCatID']) . '</select></div></div>'; 


} 

내 두 기능 :

function catOption($id) { 
$query = mysql_query("SELECT * FROM mainCats WHERE id=mainCatID") or die(mysql_error()); 
$arrCat = ""; 

while ($row = mysql_fetch_array($query)) { 
    $arrCat .= '<option value="' . $row['mainCatID'] . '"'; 
    if ($row['id'] == $id) { 
     $catSelected = 'selected="selected"'; 
    } else { 
     $catSelected = ""; 
    } 

    $arrCat .= '' . $catSelected . '>' . $row['name'] . '</option>'; 
} 
return $arrCat; 
} 

그리고 :

function subCatOption($subID) { 

$subCat = mysql_query("SELECT * FROM mainCats WHERE mainCatID='$subID' ORDER BY id ") or die(mysql_error()); 
$subArrCat = ""; 

while ($row = mysql_fetch_array($subCat)) { 
    $subArrCat .= '<option value="' . $row['mainCatID'] . '"'; 
    if ($row['mainCatID'] == $subID) { 
     $catSelected = 'selected="selected"'; 
    } else { 
     $catSelected = ""; 
    } 

    $subArrCat .= '' . $catSelected . '>' . $row['name'] . '</option>'; 
} 
return $subArrCat; 
    } 

도움 주셔서 감사합니다!

Answer 1

당신은 당신이 이미있는 경우

$(".catSelectedClass").change(function() { 
    var mainCatID = $(this).val(); 
    //Rest of code.... 
}); 

대신 $(".subCatClass").change(function() {

일반 구문

$(selector).change(function() { 
    //do something 
}); 

와 같은

$(".catSelectedClass").change(function() { 
    // alert('i'm inside the function dude'); 
    function ustCat() { 
     var mainCatID = $(this).val(); 
     //Rest of code.... 
    } 
}); 

으로 코드를 변경해야 귀하의 경우 정의 함수를 사용

$(selector).change(your_defined_function);  

당신은

$(".catSelectedClass").change(ustCat); 

Answer 2

문제가 이벤트 핸들러에 함수를 호출한다는 것입니다 사용할 수 있습니다. 대신 코드를 이벤트 처리기 안에 넣거나 처리기에서 함수를 돌리면 문제를 해결해야합니다. 함수를 이벤트 처리기로 만들 것을 제안합니다. 그러니 그냥 그 자체에 ustCat를 넣어 기능을 핸들러

$(".catSelectedClass").change(ustCat); 

Answer 3

당신은 변경 기능 내부의 기능이 필요하지 않습니다를 만들기 위해 다음과 같은 사용합니다. 당신은 간단하게 할 수 있습니다 : 당신은 그것을했다

$(".catSelectedClass").change(function() { 
    // alert('i'm inside the function dude'); 
    alert(this); 
    var mainCatID = $(this).val(); 
    alert('mainCatID captured'); 
    var id = $(this).parent().$(".catIDClass").val(); 
    // alert(id); 
    // alert(mainCatID); 
    $.ajax({ 
     type: "POST", 
     url: "panel/catGroupPost.php", 
     data: { 
      id: id, 
      mainCatID: mainCatID 
     } 
    }).done(function (data) { 
     var responseData = data; 

     alert(responseData); 
     $('#subCat').html($(data)); 

    }); 

}); 
$(".subCatClass").change(function() { 
    var mainCatID = $(this).val(); 
    var id = $('#catID').val(); 

    $.ajax({ 
     type: "POST", 
     url: "panel/subCatPost.php", 
     data: { 
      id: id, 
      mainCatID: mainCatID 
     } 
    }).done(function() { 
     alert('its done. its gone. Yes Mr.Frodo. Its all over now !!'); 
    }); 
}); 

방법은 this가 잘못된 범위에 있었다. this은 window입니다.

Answer 4

몇 가지 방법이 있습니다.

$(".catSelectedClass").change(function() { 
    (function ustCat(self){ 
     var mainCatID = self.val(); 
     ...... 
    })($(this)); 
}); 

: 당신이 당신의 내부 함수를 호출하기 전에

$(".catSelectedClass").change(function() { 
    var mainCatID = $(this).val(); 
    .... 
}); 

또는 부모를 할당합니다

당신은 정말 당신이 바로 변화의 함수 내에서 코드를 넣을 수 있습니다, ustCat를 정의 할 필요가 없습니다 또는 다른 곳에서 ustCat 함수를 넣고 변경 핸들러로 전달하면됩니다.

function ustCat(){ var mainCatID = $(this).val(); ...... }; 
$(".catSelectedClass").change(ustCat);