j查询选择/删除'li'元素。将数量和输出 URL 限制为输入框

Question

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

我已经拥有：

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

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

• 能够选择多个图像

我发现改变这条线：

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

至

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

让我选择多个元素并将它们移动到"selectedimageslist/div"阿尔托不确定这是不是正确的方式？？

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

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

• 将带有URL链接的输入框字段附加到所有选定图像一个接一个（通常用append替换输入框值字段使用当前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，就像图像列表一样，并将图像从一个列表移动到另一个列表。将图像移动到各自的列表后，只需从所选列表中获取所选图像的所有路径，将它们附加在一起，然后将它们放入输入中，即可更新所选路径。我把它改成了一个文本区域，并添加了一个换行符来清理它。

大块代码：

(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);

正在工作，但仍然很混乱，Fiddle：http://jsfiddle.net/42PGF/3/；）