如何使用javascript關鍵字更改功能

Question

我在使用更改功能時遇到了問題。我有兩個不同的下拉菜單相互連接。當第一個改變時，第二個改變。我用jquery ajax做了。但是，當我使用ID的jQuery只能工作一次。所以我做了一個關於JavaScript的這個，父母和孩子關鍵字的研究，但我找不到合適的方法。

所以我的JavaScript是象下面這樣：

<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.... 
}); 

而不是

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

同樣的，$(".subCatClass").change(function() {

常規語法

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

如果您已經你的情況定義函數使用

$(selector).change(your_defined_function);  

可以使用

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

Answer 2

的問題是，你調用的事件處理函數。如果您將代碼放入事件處理函數中，或者在處理函數中調用函數，它應該修復您的問題。我建議將該函數作爲事件處理程序。所以只是把ustCat自身和使用以下方法來使函數處理程序

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

Answer 3

你不需要改變函數內部的功能。你可以簡單地做：this

$(".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將是window。

Answer 4

幾種方法來做到這一點。

你並不真的需要定義ustCat，你可以把代碼的變化函數內部：

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

，或者給父母打電話你內心的函數之前：

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

或者把ustCat函數放到其他地方，然後把它傳遞給更改處理程序：

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