如何使用 jquery 在 laravel 中单击下拉菜单时获取 li 的值？

Question

查看代码：

 @foreach($liveValues as $live)
 <tbody role="alert">
  <td>
  <ul>
     SKU:<li  id="skuvalue" >  {{$live->SKUID}}</li>
   </ul>
   </td>
  <div class="btn-group">
  <button type="button" class="btn btn-default editSellingAttributes" 
  data-toggle="modal" data-target="" data-id="{{$live->SKUID}}">Edit 
  Selling Attributes</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-
  toggle="dropdown">
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
  <li><a href="{{url('editCatalogue')}}">Edit Catalogue</a></li>
  <li><a href="#">Archieve Listing</a></li>
  </ul>
  </div>
  </tbody>       
  @endforeach

这是 laravel 视图，我列出了许多从 db 获取的 skuid 值。在此旁边，我还列出了一个带有编辑目录和存档列表的下拉菜单。在点击存档列表时，我需要获取该行中列出的 skuid。

脚本代码：

<script type="text/javascript">
$(document).ready(function(){
var liveSKUID=$("#skuvalue").val();
alert(liveSKUID);
});

这是我尝试过的简单脚本，但它会提示“0”。

Answer 1

您正在查询li，请使用.text() 而不是.val()

$(document).ready(function(){
    var liveSKUID=$("#skuvalue").text();
    alert(liveSKUID);
})

您在每个循环中生成相同的标记，导致多个 id=skuvalue 无效 HTML。 这意味着您不能使用$(#skuvalue)，因为它将始终返回第一个匹配项，因此您必须选择它的位置。

我建议您改用data-id 唯一id的多个重复项

此外，您的示例标记正在生成一个无效表，在第一个 td 之后的其余数据周围没有 tr 或 td。

假设您有一个有效的 HTML 表格，下面是一个示例，您可以如何做到这一点。如果您只希望点击带有文本 Archieve Listing 的特定 li 的响应，您需要给它一个属性或其他东西以将点击事件附加到它。

您可以定位并假设li 始终处于第二位，但这是不可靠的。在生成标记时，添加 data-id="archive" 或类似名称应该不是问题。

单击相关的li 可以使用jQuery closest('tr') 回到DOM 树以到达当前行。从那里您可以在匹配的tr 上使用.find() 来查找带有id=skuvalue 的元素。我在下面的示例中使用了属性选择器 [id="skuvalue"]，但我认为 .find('#skuvalue') 也应该可以工作，因为您只能在单个行的上下文中进行搜索。

$(".dropdown-menu [data-id=archive]").on('click', function() {
  var x = $(this).closest('tr').find('[id=skuvalue]').text();
  alert(x);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody role="alert">
    <tr>
      <td>
        <ul>
          SKU:
          <li id="skuvalue">5</li>
        </ul>
      </td>
      <td>
        <div class="btn-group">
          <button type="button" class="btn btn-default editSellingAttributes" data-toggle="modal" data-target="" data-id="{{$live->SKUID}}">Edit 
  Selling Attributes</button>
          <button type="button" class="btn btn-default dropdown-toggle" data- toggle="dropdown">
  <span class="caret"></span>
  </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Edit Catalogue</a></li>
            <li><a data-id="archive" href="#">Archieve Listing</a></li>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <ul>
          SKU:
          <li id="skuvalue">78</li>
        </ul>
      </td>
      <td>
        <div class="btn-group">
          <button type="button" class="btn btn-default editSellingAttributes" data-toggle="modal" data-target="" data-id="{{$live->SKUID}}">Edit 
  Selling Attributes</button>
          <button type="button" class="btn btn-default dropdown-toggle" data- toggle="dropdown">
  <span class="caret"></span>
  </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Edit Catalogue</a></li>
            <li><a data-id="archive" href="#">Archieve Listing</a></li>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <ul>
          SKU:
          <li id="skuvalue">987</li>
        </ul>
      </td>
      <td>
        <div class="btn-group">
          <button type="button" class="btn btn-default editSellingAttributes" data-toggle="modal" data-target="" data-id="{{$live->SKUID}}">Edit 
  Selling Attributes</button>
          <button type="button" class="btn btn-default dropdown-toggle" data- toggle="dropdown">
  <span class="caret"></span>
  </button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Edit Catalogue</a></li>
            <li><a data-id="archive" href="#">Archieve Listing</a></li>
          </ul>
        </div>
      </td>
    </tr>
  </tbody>
  <table>

Answer 2

因此，当您根据$liveValue 的计数获取类似的li 时。您需要做的第一件事是id = skuvalue 将不起作用，因为id's 用于整个页面中的单个值或单个元素。 所以我们需要class 而不是id

其次，我注意到您正在使用val()，并且在您的html 中没有value attribute 设置为任何li。如果您正在寻找li 的text。您将使用text() 而不是val()

使用相同的类：

var inputs = $(".something");
for(var i = 0; i < inputs.length; i++){
    alert($(inputs[i]).text());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class = "something" value ="ok">
    hi
  </li>
   <li class = "something">
    is
  </li>
   <li class = "something">
    going to
  </li>
   <li class = "something">
    happen
  </li>
</ul>

但是如果你想使用id

使用 ID 和点击元素

$("#myid li").click(function() {
    alert($(this).text()); // gets text contents of clicked li
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='myid'>
  <li id='1'>skuID 1</li>
  <li id='2'>skuID 2</li>
  <li id='3'>skuID 3</li>
  <li id='4'>skuID 4</li>
  <li id='5'>skuID 5</li>
</ul>