Question

我正在寻找一些建议，因为在这里使用jQuery很难，我的编程技巧接近于0

我已经拥有的东西：

我有一个图像列表，我可以从中选择一个图像/元素，每个元素都附有（+）按钮
on按钮单击所选图像将从图像列表中删除并添加到另一个div中的新列表，按钮更改为（ - ），选择图像URL添加到输入框字段
点击（ - ）按钮删除所选图像并将其添加到包含所有其他图像的原始div，按钮再次变为（+）并清除输入字段。

我想修改以实现以下目标：

能够选择多个图像

我发现改变了这一行：

  $(this).closest('ul').append(UL_preview.children());

到

  $(this).closest('li').append(UL_preview.children());

让我选择多个元素并将它们移动到“selected images list / div” 虽然不确定这是否正确？

设置图像的数量（限制）以选择/选择li元素
例如2,9

我发现这个$("ol li:contains('Content'):lt(5)").show();但不知道如何在我的代码中使用它

附加输入框字段，其中URL链接到所有选定图像之一接下来（通常追加替换输入框值字段使用当前网址）

我会非常感谢每一点澄清，因为它花了我几天的时间来解决它。

这是带描述的脚本。

    <script>
    (function($){
        $(document).ready(function(){
            $( "#tabs" ).tabs();
            var optionId = <?php echo $_option->getId() ?>;


//on "+" button click select li element (image) and add it to selection ul

            $('#ind_option').on('click', 'button.select', function(){
                var imgEl = $(this).siblings('.image');

// insert url of image as a value in input-box 

                $("#options_" + optionId + "_myimage").val(imgEl.parent().data('image'));     


                var UL_preview = $("#img_preview_" + optionId);             
                if (UL_preview.children().length) {
                    $(this).closest('ul').append(UL_preview.children());
                }

                UL_preview.html(imgEl.closest('li'));

                //change button  from "+" to "-"
                reloadButtonClass();     

              });

//on "-" button click remove li element (image) from selection 

            $('#ind_option').on('click', 'button.unselect', function(){
                var imgEl = $(this).siblings('.image');

// remove url of the image from input-box field //
                $("#options_" + optionId + "_myimage").val('');     


                var liEl = imgEl.closest('li');
                $('#i-'+liEl.data('tab')+' ul.image_list').append(liEl);

//change button  from "-" to "+"

                reloadButtonClass();  
            });


//button's function change on elements 

            function reloadButtonClass() {
                $('.img_preview button.select').removeClass('select').addClass('unselect');
                $('.image_list button.unselect').removeClass('unselect').addClass('select');
            }
        });
    })(jQuery);
</script>

Answer 1

是否存在图像URL的数据属性与实际图像src不同的情况？如果没有，您可以清理标记，只需通过拉动SRC属性来使用图像元素的图像路径。

就解决方案而言，我会将所选框设置为UL，如图像列表，并将图像从一个列表移动到另一个列表。将图像移动到各自的列表后，只需从所选列表中获取所选图像的所有路径，将它们附加在一起，然后将它们放入输入中即可更新所选路径。我把它改成了textarea并添加了一个换行符来清理外观。

大块代码：

(function ($) {
    $(function () {
        var optionId = 4;

        $('#test_option').on('click', 'button.select', function () {
            var max = $('.numInputs option:selected').val();
            var pvw = $("#selected_preview_" + optionId);
            var count = pvw.children('li');
            if (max == 0 || (count < max)) {
                $(this).parent().appendTo(pvw);
                updatePaths();
            }
        }).on('click', 'button.unselect', function () {
            $('ul.test_image_list').append($(this).parent());
            updatePaths();
        });

        function updatePaths() {
            var pvw = $("#selected_preview_" + optionId);
            // textarea for paths
            var iPaths = $("#options_" + optionId + "_testimage");
            var pathStr = '';
            pvw.find('img').each(function () {
                pathStr += $(this).attr('src') + '/r/n';
            });
            iPaths.val(pvw);
            reloadButtonClass();
        }

        function reloadButtonClass() {
            $('.selected_preview button.select').removeClass('select').addClass('unselect');
            $('.test_image_list button.unselect').removeClass('unselect').addClass('select');
        }
    });
})(jQuery);

工作，但仍然凌乱，小提琴：http://jsfiddle.net/42PGF/3/;）

jquery选择/删除'li'元素。限制数量和输出框的输出URL

1 个答案: