小编Jer*_*ans的帖子

有没有办法用jQuery找到所有数字类？

我有以下类的元素:

<div class="placeholder 0 original dropped default-load"></div>
<div class="placeholder 1 original dropped default-load"></div>
<div class="placeholder 2 original dropped default-load"></div>
<div class="placeholder 3 original dropped default-load"></div>

但是,我正在使用jQuery draggable ui.因此这些占位符是可拖动的,并且最终这些数字类将以随机顺序例如(3,0,2,1),并且将不再与indexif if use the .eachfunction 匹配.

所以基本上,在页面加载时,元素的顺序为0,1,2,3 ......(基于数据库中的结果数量).

他们可以乱七八糟地这将导致随机顺序(0,3,2,1,...).但是有一个默认按钮.使用此按钮,他们可以撤消所有操作,并重置默认顺序.

我尝试了以下但是这不起作用,因为index它们与数字类不匹配,如果他们乱七八糟(他们显然会这样).

$(".default").click(function (e) {
    e.preventDefault();
    $("li.placeholder").each(function (index) {
        $(this).empty();
        $(this).removeClass(index);
        $(this).removeClass("dropped");
        $(this).removeClass("default-load");
        if (!($(this).hasClass("original"))) {
            $(this).remove();
        }
        $(".modal-" + index).remove();
    });
    init(); // Callback
});

任何帮助是极大的赞赏!!

我有一个名为dropable的无序列表<ul class="droppable">.在无序列表中,我动态生成了名为list的列表项<li class="placeholder"></li>,这些列表项也是可放置的.

在占位符之间删除可拖动项目时,一切正常.但是当在其<li class="placeholder"></li>自身上放置可拖动项目时,可拖动项目将附加到占位符和无序列表.

所以我得到了它的双重克隆.

这是一个有视觉例子的jsfiddle.我知道在我的页面上获得双重克隆是合乎逻辑的,但我不知道如何禁用它...

任何帮助是极大的赞赏!

更新:如果您将可拖动项目垂直拖动到可放置元素上,它们会自动追加？怎么可能？

我创建了一个简单的链接来打印我创建的页面。我正在使用Google Chrome。但是该链接不起作用。当我检查控制台日志时，单击链接会收到以下消息：

超出最大呼叫堆栈大小

这是我用来创建打印的HTML：

<a href="javascript:window.print();">Print page</a>

谢谢您的帮助！

我正在使用fengyuanchen的裁剪工具，它具有很棒的功能。我正在尝试制作一个具有动态尺寸的固定裁剪框。

但我目前只关心如何弄清楚如何使其达到特定大小。

我尝试了以下方法：

$(function() {

    $('.img-container > img').cropper({
      aspectRatio: 16 / 9,
      autoCropArea: 0.65,
      strict: false,
      guides: false,
      highlight: false,
      dragCrop: false,
      cropBoxMovable: false,
      cropBoxResizable: false,
      setCropBoxData('1600', '1200')
    });

});

但setCropBoxData对我不起作用。我究竟做错了什么？

更新

这应该是为该实际裁剪框设置固定宽度的正确语法，但我仍然没有得到任何结果：

$(function() {
  var $toCrop = $('.img-container > img');

  $toCrop.cropper({
    aspectRatio: 16 / 9,
    autoCropArea: true,
    strict: false,
    guides: false,
    highlight: true,
    dragCrop: false,
    cropBoxMovable: false,
    cropBoxResizable: false,
    built: function () {
      $toCrop.cropper("setCropBoxData", { width: "100", height: "50" });
    }
  });
});

我有这样的跨度<span class="join-event to-join">join event</span>.我使用此函数通过AJAX进行单击操作.

但是在成功函数中,我似乎无法为该单击的跨度添加一个类.

function accept() {

    $(".to-join").click(function() {

        var id = $(this).attr("data-event");

        $.ajax({

            type: "post",
            url: "../assets/js/ajax/toggle-events.php",
            data: { 'id': id },
            success: function() {

                alert("good job");
                $(this).addClass("joined");

            },

            error: function () {

                alert("fail");

            }

        });

    });

}

我有一个拖放系统,每个丢弃的项目都有三个数据属性.

• 数据ID
• 数据阶
• 数据内容

现在我应该将这些属性放入一个多维数组中.它应该如下所示:

data-order ="0"[data-id ="1",data-content ="blabla"]; data-order ="1"[data-id ="2",data-content ="another content"];

但我不知道如何实现这一目标.还没有在jQuery中使用数组.

谢谢您的帮助!

这是我一直在尝试的东西,但没有成功:

<li class="dropped" data-order="0" data-id="1" data-content="blabla"></li>
<li class="dropped" data-order="0" data-id="2" data-content="another content"></li>

$(".send").click(function() {

    var itterate = $(".dropped");
    var data_array = new Array();

    for (var i in itterate.data()) {

        var sub_array = new Array();
        sub_array['data-order'] = i;
        sub_array['data-id'] = itterate.data()[i];
        sub_array['data-content'] = itterate.data([i]);

        data_array.push(sub_array);

    }

    var serialized = $.param(itterate.serializeArray().concat(data_array));

    $("#result").text(serialized);

});

这是一个jsfiddle

我有2个清单.

第一个列表包含所有数据.另一个是占位符.我有一个按钮来取默认值.将第一个列表克隆到占位符中.

现在我将这个代码用于alert所有找到data-id的代码.哪个工作正常.

但是当我尝试将这些数据属性粘贴到占位符时,它总是粘贴每个占位符中的最后一个值.

$(".default").click(function() {

    $("li.to-drag").each(function(index) {

        $("li.placeholder").addClass("dropped");

        var clone = $(this).clone();
        var day = $(this).attr("data-id");

            $("li.placeholder").each(function(){
                $("li.placeholder").attr("data-id", index);
            });

        clone.hide().appendTo("." + index).fadeIn(1500);

    });

    var dropped = $(".dropped").length;
    var original = $(".placeholder").length;

    if (dropped === original) {

        $("li.placeholder").removeClass(blank_placeholder);
        $("#dropzone").append('<li class="placeholder blank" data-id="" data-order=""></li>');

        init();
    }

});

我怎么解决这个问题？

解决方案:

我不得不each()在另一个迭代.to-drag该类之外的第二个循环.

$("li.placeholder").each(function(){
    var day = $(this).children().attr("data-id");
    $(this).attr("data-id", day);
});

这是一个jsfiddle