如何从id <a> and create ajax query</a>获取两个变量

时间:2015-02-03 18:20:27

标签: javascript jquery ajax

我的菜单结构如下所示。在id <a>中我实际上有两个变量。第一个位于_之前,第二个位于_(first_second之后)。每个<a>都位于<ul id="fotolia_menu">

我想知道如何在点击时从id中获取它们并创建一个使用此变量运行ajax thumb(first, second, 0);的单击函数。

JQUERY AJAX

    <script type="text/javascript">
    function thumb(paramType, param, page){
        $.ajax({
            url: "skrypt.php?paramType="+paramType+"&param="+param+"&page="+page
        }).done(function(data) {                            
            $('#content').html(data);
        });
    }

HTML

<ul id="fotolia_menu">
<li><a href="#">Kategorie</a>
    <ul>
        <li><a href="#" id="cat1_3000000">Ludzie</a>
            <ul>
                <li><a href="#" id="cat1_3001000">W Studio</a>
                <ul>
                  <li><a href="#" id="cat1_3001001">Mężczyzna</a></li>
                  <li><a href="#" id="cat1_3001002">Kobieta</a></li>
                  <li><a href="#" id="cat1_3001003">Niemowlę</a></li>
                  <li><a href="#" id="cat1_3001004">Dziecko</a></li>
                  <li><a href="#" id="cat1_3001005">Nastolatek</a></li>

//编辑

Link&#39>看起来像这样:

<ul id="fotolia_menu">
<li><a href="#">Kategorie</a>
    <ul>
        <li><a href="#" data-paramType="cat1" data-param="3000000">Ludzie</a>
            <ul>
                <li><a href="#" data-paramType="cat1" data-param="3001000">W Studio</a>
                <ul>
                  <li><a href="#" data-paramType="cat1" data-param="3001001">Mężczyzna</a></li>
                  <li><a href="#" data-paramType="cat1" data-param="3001002">Kobieta</a></li>
                  <li><a href="#" data-paramType="cat1" data-param="3001003">Niemowlę</a></li>
                  <li><a href="#" data-paramType="cat1" data-param="3001004">Dziecko</a></li>

但这不起作用:

    <script type="text/javascript">
    function thumb(paramType, param, page){
        $.ajax({
            url: "skrypt.php?paramType="+paramType+"&param="+param+"&page="+page
        }).done(function(data) {                            
            $('#content').html(data);
        });
    }

    $('#fotolia_menu a').click(function(){
        var paramtype = $elt.data("paramType");
        var param = $elt.data("param");
        thumb(paramType, param, 0);
    });

2 个答案:

答案 0 :(得分:3)

老实说,您可能不应该在id属性中包含该信息。你可能应该做的是:

<a href="#" data-param1="cat1" data-param2="3001001">..</a>

然后您可以使用此代码获取值:

var param1 = $elt.data("param1");
var param2 = $elt.data("param2");

当HTML 5提供了一种存储具有数据属性的元素的元信息的好方法时,没有理由搞砸分割id标记。

如果你绝对不想改变你做事的方式,那么是split是处理这个问题的正确方法,因为mopo922已经回答了。

答案 1 :(得分:3)

添加一个点击事件,该事件拆分所点击元素的id,并将这些值作为参数传递给thumb()

<script>
$('#fotolia_menu a').click(function(){
    var pieces = $(this).attr('id').split('_');
    thumb(pieces[0], pieces[1], 0);
});

或者,我非常喜欢@thatidiotguy关于使用data-属性的答案。