使用jquery为多个选择创建表格表单

时间:2015-11-02 23:45:27

标签: php html css

我有这个输出数据的循环:

 foreach ($userItems_get as $item => $value) {

            if ($value['prefab'] == 'wearable') {

            echo $value['name'] . "</br>";

            echo "<img src=\"{$value['image_inventory']}.png\" width=\"90\" height=\"60\">" . "</br>";

            if (!isset($value['item_rarity'])) {
                $rarity = "common";
            } else {
                $rarity = $value['item_rarity'];
            }

            echo $rarity . "</br>";

            foreach ($userItemsLoad as $key => $values) {

                if ($item == $values['defindex']) {

                    echo $values['id'] . "</br></br>";
                    break;
                }

            }

            }


        }

我希望它显示如下:http://puu.sh/l7gyH/afe812c4f3.jpg

我有这个html:

<div class="item-container">
    <div id="item-box">
              <img src="http://lorempixel.com/output/technics-q-c-95-60-9.jpg" alt="">

              <div id="rarity">
                    rare
              </div>
          </div>

用户选择的任何项目我希望获得值[&#39; id&#39;],用户可以一次选择多个项目。

我可以创建一个普通的检查点类型输入表,但是用户可能有1000个项目,所以它需要像图片中那样。

有一种简单的方法可以实现这一目标吗?感谢

1 个答案:

答案 0 :(得分:0)

<div class="item-container">
    <div class="item-box" data-id="1234">
        <img src="http://lorempixel.com/output/technics-q-c-95-60-9.jpg" alt="">
        <div id="rarity">
            rare
        </div>
    </div>
</div>


<script>
    var selectedItems = [];

    $('.item-box').on('click', function(e){
        $(this).toggleClass('selected');
        var selectedItems = []
        $('.item-box.selected').each(function(i,o){
            selectedItems.push($(this).data('id'))
        })
    });
</script>

我个人认为我会考虑使用AngularJS(https://angularjs.org/)来做这样的事情,它会让你的生活变得更轻松。