html、jQ、js、php给循环中的元素绑定事件，并获取到该元素或者该条数据相关的其他元素值，用以触发ajax请求。

html、jQ、js、php给循环中的元素绑定事件，并获取到该元素或者该条数据相关的其他元素值，用以触发ajax请求。

引言

在开发中（特别是做php的什么都需要会，难受。。。），大家应该会遇到类似这样子的需求：点击某一条评论，触发一个评论弹窗（这类需求一般都是为了提高用户体验度，而诞生的）,这个时候我们就需要获取到你点击的这条数据的id。会一点html的朋友都知道，html中的id是唯一的（注意这里的id不同于前面提到的数据id）。但是我们在做项目的时候 列表中的数据以及元素都是被循环出来的，所以不论你给我这个被循环的元素用id标识还是class标识 你通过id或者class去获取值的时候，直接通过id和class去获取 就会获取到你循环出来的数据的 最后一个，这是不符合需求的。

正文

哈哈，废话不多说，直接上代码(以下只是关键的代码，开头结尾不重要的就不放上来扰乱大家视线了，{{}}的地方是smarty模板引擎的写法，如果大家的模板引擎不一样 就不用在意，这个语法大家应该都看得懂：就是循环 判断 赋值 替换成各自的引擎写法即可。)：

 {{foreach from=$data.info item=v}}
                    {{if $v}}
                    <tr class="tbody">
                        <td class="username" "see({{$v.id}})">{{$v.title|msubstr:0:40:'utf8'}}</td>
                        <td >{{$v.category_name}}</td>
                        <td>{{$v.department_name}}</td>
                        <td>{{'Y-m-d'|date:$v.create_time}}</td>
                        <td>
                            {{if $v.status eq 2}}
                            一级审核未通过
                            {{elseif $v.status eq 1}}
                            终审通过
                            {{elseif $v.status eq 3}}
                            一级审核通过
                            {{elseif $v.status eq 6}}
                            二级审核不通过
                            {{elseif $v.status eq 7}}
                            待三级审核
                            {{elseif $v.status eq 8}}
                            三级审核不通过
                            {{elseif $v.status eq 0}}
                            未审核
                            {{/if}}
                            <!-- LOG中的审核状态：1、表示一级审核不通过；2、表示一级审核通过；3、二级审核通过，4、表示二级审核不通过；5、二级提交给三级审核；6、表示二级取消给三级审核；7、三级审核通过；8、三级审核不通过 -->
                        </td>
                        <td>{{$v.publish_user_name}}</td>
                        <td>{{$v.check_user_name}}</td>
                        <td>
                            <b "see({{$v.id}})">查看</b>
                    <!--        {{if $finalAuditEdit==2}}
                            <a href="{{U url='finformation/administratorEdit&id='|cat:$v.id}}">编辑</a>
                            {{/if}}-->
                            {{if $v.status == 7 || $v.status == 1 || $v.status == 8}}
                                 <a href="{{U url='finformation/threadAuditEdit&id='|cat:$v.id}}">审核</a>
                            {{/if}}
                            {{if $finalAuditDelete==2}}
                                <a href="{{U url='finformation/deleteMessage&id='|cat:$v.id}}">删除</a>
                            {{/if}}




                            <select name="catid" class="add_content">
                                <option name="catid" value="0">同步到门户网站</option>
                                {{foreach from=$group_category item=v2}}
                                <option name="catid"  value="{{$v2.catid}}">{{$v2.name}}</option>
                                {{if $v2.child}}
                                {{foreach from=$v2.child item=v2_2}}
                                <option  name="catid"  value="{{$v2_2.catid}}">——{{$v2_2.name}}</option>
                                {{if $v2_2.child}}
                                {{foreach from=$v2_2.child item=v2_3}}
                                <option name="catid" value="{{$v2_3.catid}}">————{{$v2_3.name}}</option>
                                {{/foreach}}
                                {{/if}}
                                {{/foreach}}
                                {{/if}}
                                {{/foreach}}
                            </select>
                            <input name="cid" value="{{$v.id}}" type="hidden"/> 


                        </td>

                    </tr>
                    {{/if}}
                    {{/foreach}}


					<script>
                        $(".add_content").change(function () {
                            var cid=$(this).next().val();//   这里是关键点。获取select的下一个兄弟节点的值(对于选择器不清楚的 朋友可以查看jQ文档的选择器)
                            var catid=$(this).find("option:selected").val()//  这里是关键点。获取select中 被选中的option的值

                            $.ajax({
                                type:'post',
                                url:"{{U url='Findex/add_content'}}",
                                dataType:'json',
                                data:{
                                    cid:cid,
                                    catid:catid,
                                },
                                success:function(json){
                                    if(json.status == 1){
                                        alert('操作成功');
                                    }else{
                                        alert('操作失败');
                                    }
                                },

                            });
                        })
                    </script>

转载使用请注明出处，谢谢。