Question

我有下面的链接列表

<div id='list1'>
<a href='#1'>USA</a>
<a href='#2'>Canada</a>
<a href='#3'>France</a>
</div>

<div id='list2'>
<a href='#1'>Cars</a>
<a href='#2'>Houses</a>
<a href='#3'>Machines</a>
</div>

我想要做的是当用户点击USA然后它（美国链接）变为粗体。然后用户单击列表2中的任何元素。单击这两个链接后，link1和link2中所选元素的值将传递给ajax函数。谁能告诉我这件事。

Answer 1

我没有检查它，但你可以像这样使用smth：

<div id='list1'>
<a href='#1'>USA</a>
<a href='#2'>Canada</a>
<a href='#3'>France</a>
</div>

<div id='list2'>
<a href='#1'>Cars</a>
<a href='#2'>Houses</a>
<a href='#3'>Machines</a>
</div>

<script>
     $(document).ready(function(){
          $('#list1 > a').click(function(){
               $('#list1 > a').attr('class', '');
               $(this).attr('class','selected');

               if ($('#list2 > a.selected').length > 0)
               {
                     $.post('post/submit/url', {'link1':$(this).attr("href"), 'link2':$('#list2 > a.selected').attr("href")}, function(data){
                          alert(data);
                     });
               }
          });

          $('#list2 > a').click(function(){
               $('#list2 > a').attr('class', '');
               $(this).attr('class','selected');

               if ($('#list1 > a.selected').length > 0)
               {
                     $.post('post/submit/url', {'link1':$('#list1 > a.selected').attr("href"), 'link2':$(this).attr("href")}, function(data){
                          alert(data);
                     });
               }
          });
     });
</script>

Answer 2

执行以下操作：创建一个隐藏的输入元素，用于存储选定的国家/地区值


$("#list1 a").click(function(e) {
  e.preventDefault();
  $(this).addClass("blodAnchor");// may be font-weight bold in this class
  $("#selectedCountry").val('');
  $("#selectedCountry").val($(this).text());
});

//then
$("#list2 a").click(function(e) {
  e.preventDefault();
  var selectedVal = $(this).text() || "";
  var selectedCountry = $("#selectedCountry").val() || "";
  if(selectedCountry != "" && selectedVal != "") {
     $.ajax({
       type: "POST",
       data: {country: selectedCountry, someVal : selectedVal},
       url: ".....",
       success: function(resp) {
          ........
       }
     });
  }
});

需要jQuery / ajax帮助

2 个答案: