HTML5前端页面取值问题

前端用的是div+span做的下拉选单，我自己取值每次只能取到第一个值，不管我选取的第几个，我的取值代码有问题，求大神解答~

$(".dia_menu_lst span").click(function (e) {
alert("this is my function!!!!!!");
// var weight=$("[data-att='dia_weig']").val();
var ctgId = $(".swiper-wrapper p").find("input").attr("value");
var weight =$('#weigdiv span i').html();
var neatness =$('#neatdiv span i').html();
var color =$('#colordiv span i').html();
alert(ctgId+" "+weight+" "+neatness+" "+color);});

                        我的js取值代码

$(".dia_menu_lst span").click(function () {
var data = $(this).attr('data');
}

这样写只能查到dom节点的第一个元素，，不如换成this试试

大概是这样，，虽然改的好像，，是不太对

 $(".dia_menu_lst span").click(function (e) {
alert("this is my function!!!!!!");
var ctgId = $(this).find("input").attr("value");
var weight =$(this).html();
var neatness =$(this).html();
var color =$(this).html();
alert(ctgId+" "+weight+" "+neatness+" "+color);});

你单独把取值和设置值区分开，

 function getValue(){
 var ctgId = $(".swiper-wrapper p").find("input").attr("value");
var weight =$('#weigdiv span i').html();
var neatness =$('#neatdiv span i').html();
var color =$('#colordiv span i').html();
alert(ctgId+" "+weight+" "+neatness+" "+color);});
 }

设置值，可以用:

// 第一个
$("#wgidiv span").click(function (e) {
        $("#ajfds").val(this.data); // ajfds是个隐藏域
});

// 第二个
$("#wwuiv span").click(function (e) {
        $("#wwuiv").val(this.data); // wwuiv是个隐藏域
})

没有理解jquery选择器，

var weight =$('#weigdiv span i').html();

$('#weigdiv span i') 这样选取出来是一个集合，类似于数组，但不是数组。
对于一个集合.html()它怎么知道是哪一个，所以默认就是第一个咯

$('#neatdiv span i')這個有問題，因爲$('#neatdiv）下面有很多的span，你沒有做標記，選中的肯定是第一個span。其他的取值都是這問題
最簡單的用this屬性點擊那個去取那個值
$(".dia_menu_lst span").click(function (e) {
var weight =$(this).html();
alert(weight)
});

事件触发后获取的数值不对，你要点击哪个获取哪个，用this指向该点击元素进行相应的赋值就行了

分析：
1. var weight =$('#weigdiv span i').html() 只能取 weigdiv span i 第一个元素，若想取选中，可用$(this).find('i').html();
2. 当前选择方式只能选取点中div的span，无法选取其他div中的span ，需要做一个选中状态添加

解决方式：

1. 为选中添加css，例如在head中添加 .selected{color:red}

2. 修改js代码如下
   $(".dia_menu_lst span").click(function (e) {
   $(this).siblings().each(function){
   $(this).removeClass("selected"); //去除同一个div下span兄弟节点的选中状态
   }
   $(this).toogleClass("selected"); // 点击某个span时添加或移除选中状态

   var ctgId = $(".swiper-wrapper p").find("input").attr("value");
   var weight =$('#weigdiv .selected i').html(); //选择含有选中状态selected的元素（有选中状态状态的span）
   var neatness =$('#neatdiv .selected i').html();
   var color =$('#colordiv .selected i').html();
   alert(ctgId +" "+weight+" "+neatness+" "+color);
   });