javascript - 使用 Jquery 递增选项卡

Question

我在 foreach 中使用 Tabs，这是我的代码:

foreach ($pdts as $pdt=>$r){

    echo'<tr>';
        echo'
        <td><div style="width: 10px;"><span id="plus-'.$pdt.'"> + </span><br/>


            </div></td>
        <td><div style="width:200px; text-align:center">'.$r['Product_Number'].'</div></td>
        <td><div  style="width:200px; text-align:center">'.$r['Barcode'].'</div></td>
        <td><div  style="width:150px; text-align:center">'.$r['Product_Name'].'</div></td>
        <td><div  style="width:200px; text-align:center">'.$r['Supplier_Number'].'</div></td>
        <td><div  style="width:200px; text-align:center">'.$r['Stock_Number'].'</div></td>';
        $sql_stk="SELECT Stock_Name FROM stock where Stock_Number='".$r['Stock_Number']."'";
        $stks = db_query($database_name, $sql_stk);
        //var_dump($stks );
            foreach ($stks as $stk=>$s){
                echo'   <td style="text-align:center; width:120px; ">'.$s['Stock_Name'].'</td>';
            }
        echo'<td style="text-align:center; width:120px; ">'.$r['Purchasing_Price'].'</td>
        <td style="text-align:center; width:120px; ">'.$r['Selling_Price'].'</td>
        <td style="text-align:center; width:120px; ">'.$r['Quantity'].'</td>';
         echo'</tr>
         <tr><td colspan="10"><div id="detail-'.$pdt.'" >
         <div id="tabs-'.$pdt.'">
              <ul>
                <li><a href="#tabs-1">Sales Detail</a></li>
                <li><a href="#tabs-2">Purchases Detail</a></li>
              </ul>
              <div id="tabs-1">
                <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. </p>
              </div>
              <div id="tabs-2">
                <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus,</p>
              </div>
        </div>

    </div>';

}

因此，对于每个产品，我都有一个特定的选项卡，其中包含涉及该产品的信息。

 <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>

如何使用 Jquery 调用每个产品的每个选项卡？
感谢您的帮助

Answer 1

我找到了解决方案:

<script>
$(document).ready(function() 
{
	 $('[id^="detail-"]').hide();
	  
				$('[id^="plus-"]').click(function() {
					alert('ALLAH');
					  var id = $(this).attr('id');
					 
					   var idx=id.substring(id.lastIndexOf("-"));
					    
						$("#detail"+idx).toggle(500); 
						$( "#tab"+idx ).tabs();						
				});
			});

			</script>

和:

<div id="tab-'.$pdt.'">
              <ul>
                <li><a href="#tabs-1">Sales Detail</a></li>
                <li><a href="#tabs-2">Purchases Detail</a></li>
              </ul>