Question

您好我想使用jquery或javascript

获取具有特定类的元素的id

这是完整的代码和一个很长的代码，导致我在使用checkDet函数时未定义。

<div class="col-sm-12" style="background-color: #fafafa; padding-top:20px; padding-bottom:20px;">
                <div class="p-property-start">
                <div class="p-property-item">


                    <div class="col-sm-2">
                    <p class="p-item-title">Color:</p>
                    </div>

                    <div class="col-sm-10">
                    <span class="p-item-main">
                        <ul class="colo-list">
                            <?php $notacol = DataDB::getInstance()->get_rows_from_field('product_color','product_id',$value);
                                    foreach($notacol as $col){
                            ?>
                                <li class="colo-list-image" id="col<?php echo $col['product_color_id']; ?>" onclick="selectColor<?php echo $col['product_color_id']; ?>()">
                                <a>
                                    <img src="img/product/icon/<?php echo $col['image']; ?>" title="<?php echo $col['color_name']; ?>">
                                </a>
                                </li>

<script>

function selectColor<?php echo $col['product_color_id']; ?>(){
var pro_col = <?php echo $col['product_color_id']; ?>;
var ins = 'prosi';
var d = document.getElementById("col<?php echo $col['product_color_id']; >");
$('.active').removeClass('active');
d.className += " active";


$.ajax({
         type: 'post',
         url: 'frextra.php',
        data: "pro_col=" + pro_col + "&ins=" + ins,
             success: function(data)
        {   
            document.getElementById("sizecover").style.display = "block";
            jQuery('#siz').html(data).show(); 
        }
    });

}           

</script>   
                            <?php } ?>

                        </ul>
                    </span>
                    </div>
                </div>
                </div>


                <div class="p-property-start" style="margin-top:50px; display:none;" id="sizecover">
                    <div class="p-property-item">
                        <div class="col-sm-2">
                        <p class="p-item-title">Size:</p>
                        </div>

                <div class="col-sm-10">
                    <span class="p-item-main">
                        <ul class="colo-list" id="siz">

                        </ul>
                    </span>

                    </div>
                </div>
<script>

function selectSize(ID){
var d = document.getElementById("siz"+ID);
$('.sactive').removeClass('sactive');
d.className += " sactive";
}           

</script>
                </div>

                <div class="p-property-start" style="margin-top:10px;">
                    <div class="p-property-item">
                        <div class="col-sm-2">
                        <p class="p-item-title">Quantity:</p>
                        </div>

                        <div class="col-sm-10">

                            <fieldset style="padding-top:10px;">
                                <input type="number" id="quantityfr" value="1">
                                <span style="color: #999;">Quantity left (594686 pieces available)</span>
                            <fieldset>
                        </div>
                    </div>

                </div>

                <div class="col-sm-12 p-property-padd" style="padding-top:30px;">
                <div class="p-property-item">

                    <input type="button" name="submit" value="Add to cart" onclick="checkDet()" class="button biz-btn" style="font-size: 15px; border-radius: 3px; padding: 10px;">

                    <a onclick="saveWishlist()" class="add-wish" style="padding-left:20px; font-size:16px;">
                    <i class="fa fa-heart add-wish-heart" id="heart"></i>
                    <span>Add to wishlist</span>
                    </a>
                </div>
                </div>

            </div>
<script>
   function checkDet(){
   var abc = $(this).closest("colo-list-image active").attr("id");
   console.log(abc);
   }
</script>

所以基本上我正在做的是获得产品颜色。当用户点击颜色时，我会获取该颜色的大小。现在我想知道通过检查当前在css中活动的颜色选择的颜色的id

Answer 1

这应该有效

为什么不将$ col ['product_color_id']作为值添加到标签img上并执行此操作

function FindClass(){
    $( "li" ).each(
        function(){
            if($(this).attr('class')=='colo-list-image active'){
                console.log($(this).find('ul').find('a').find('img').attr('value'));
            }
        }
    );
}

您也可以另存为数组

var arr = [];
function FindClass(){
    $( "li" ).each(
        function(){
            if($(this).attr('class')=='colo-list-image active'){
                arr.push($(this).find('ul').find('a').find('img').attr('value'));
            }
        }
    );
}

请注意，arr在函数之外，所以它是一个全局变量，你可以使用你想要的任何东西

获取具有特定类的元素的id

1 个答案: