jquery - jQuery 不会更改标签的 Css 或者可能找不到标签

Question

我有下面的代码，我使用clone()和delegate(). 代码正在一个带有链接的 jQuery UI 对话框中加载。问题是 Ajax 被正确触发，它按预期调用成功方法，但没有显示 Ok 或 noOk div，我的意思是警报触发但 div 的 css 没有改变，你认为我的问题在哪里? 选择器有问题吗？谢谢

    <input id="TaskId" name="TaskId" type="hidden" value="18" />
    <div id="MainDiv">
        <div id="toClone">
            <div style="display: inline;">
                <select id="Tasksess">
                    <option value="">لطفاً کار را انتخاب کنيد</option>
                    <optgroup label="کار های جديد">
                            <option value="16"style="">q3fe</option>
                            <option value="18"style="">fjhv j</option>
                            <option value="19"style="">wref</option>
                            <option value="25"style="">ff</option>
                    </optgroup>
                    <optgroup label="کار های در دست اقدام">
                            <option value="13"style="">rr</option>
                            <option value="15"style="">yy</option>
                    </optgroup>
                    <optgroup label="کار های تمام شده">
                            <option value="14"style="">tt</option>
                            <option value="18"style="">fjhv j</option>
                    </optgroup>
                </select>
            </div>
            <div style="display: inline;">
                <select id="Statusess" name="Statusess">
                    <option value="">لطفاً وابستگی را انتخاب کنيد</option>
                    <option value="1">پيشنياز</option>
                    <option value="2">همنياز</option>
                </select>
            </div>
            <div style="display: none;" id="Ok">
                ok
            </div>
            <div style="display: none;" id="noOk">
                تکراری
            </div>
            <div id="loadingGif" style="display: none;">
                <img src="/Content/Images/ajax-loader/253L.gif" alt=""/>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {

            var Maindiv = $("#MainDiv");
            var toClone = $("#toClone");

            //$("#Statusess").each(function () {
                $("#MainDiv").delegate('#Statusess', 'change', function () {
                    if ($(this).find(":selected").val() != "") {                    
                        if ($(this).parent().prev().find(":selected").val() != "") {
                            $(this).parent().parent().find("#loadingGif").attr("style", "display: inline;");
                            $.ajax({
                                url: '/ProjectAdmin/Project/AddTaskDependency?MainTaskId=' + $("#TaskId").val() + '&DependentTaskId=' + $(this).parent().prev().find(":selected").val() + '&Status=' + $(this).find(":selected").val(),
                                type: 'GET',
                                success: function (data, status) {
                                    if (data != "0") {
                                        $(this).parent().parent().find("#Ok").css('display', 'inline');
                                        $(this).parent().parent().find("#noOk").css('display', 'none');
  alert("1");
                                    }
                                    else if (data == "0") {
                                        $(this).parent().parent().find("#Ok").css('display', 'none');
                                        $(this).parent().parent().find("#noOk").css('display', 'inline');
  alert("2");
                                    }
                                    var div = $('div:eq(0)', Maindiv).clone();
                                    Maindiv.append(div);
                                }
                            });
                            $(this).parent().parent().find("#loadingGif").attr("style", "display: none;");

                        }
                    }
                });
            //});

        });
    </script>

score 1 · Accepted Answer

我不能肯定地说这是问题所在，但肯定是您应该纠正的问题。如果我正确理解了您的代码，那么您正在克隆#toClonediv。但是，在该 div 中有许多具有 id 的孩子，包括 your#Ok和#noOk. Id 应该是page唯一的，因此一旦克隆，您就不再拥有唯一的项目。因此，您应该将它们全部更改为类：

id="toClone"到class="toClone"
id="Tasksess"到class="Tasksess"
id="Statusess"到class="Statusess"
id="Ok"到class="Ok"
id="noOk"到class="noOk"
id="loadingGif"到class="loadingGif"

（但是，我确实有疑问，如果您真的希望Ok,noOk和loadingGif成为toClonediv 的孩子，或者您只是希望它们成为 div 的唯一孩子MainDiv。您的代码似乎如此。如果是后者，那么您需要更改您的关闭</div>为您的 div 标记toClone不包装独特Ok的noOk、和loadingGif元素。在这种情况下，您可以将 id 留给那些独特的孩子。）

更改后，您将需要更改其余代码以选择类，而不是 id；但也适用于作为新克隆子级的特定类。更改为类可能会解决您的问题，因为克隆创建的多个 id 项目可能会导致您的 jquery 找不到这些项目。

score 1 · Accepted Answer

我相信您的主要问题在于您的选择器，是的。您可以添加额外的警报以在每个引用处吐出值，以查看哪里出错了。

我对这种方法感到恼火，因此我对您的设置进行了一些更改，并且（除了没有您的 AskTaskDependancy 文件我无法测试的 ajax 部分）我相信它可以正常工作，正如您所期望的那样。

首先，jsFiddle

注意：我将所有文本更改为英文。这与您的代码无关，我只是不懂英语，因此请随时将其更改回来，因为它对代码没有影响。

变更日志

alert()如果 aselect的值为空，则添加 error s
$(this).find(":selected").val()简单地$(this).val()
camelCase 的几个参考名称
MainDiv 中的所有 ID 到类
将类名从选择元素移动到包含每个元素的 div
.parent.prev()to .parent.children(".tasksess")（以及其他元素的类似参考方案）
设置一个 var 以便于参考每个 div/select
将 css() 更改为 attr() （用于隐藏/显示 ok/notOk）
我在单独的行上构建了 ajax url，以便于阅读。
移动了clone()ajax 请求的外部以验证它是否有效（根据需要随时将其移回 - 请注意，如果您不先隐藏它，每个副本中仍会显示 loadingGif）
注释掉了测试的ajax请求

新的 HTML

<input id="TaskId" name="TaskId" type="hidden" value="18" />
<div id="MainDiv">
    <div class="toClone">
        <div class="tasksess" style="display: inline;">
            <select name="tasksess">
                <option value="">Select a Task</option>
                <optgroup label="Group 1">
                        <option value="16"style="">q3fe</option>
                        <option value="18"style="">fjhv j</option>
                        <option value="19"style="">wref</option>
                        <option value="25"style="">ff</option>
                </optgroup>
                <optgroup label="Group 2">
                        <option value="13"style="">rr</option>
                        <option value="15"style="">yy</option>
                </optgroup>
                <optgroup label="Group 3">
                        <option value="14"style="">tt</option>
                        <option value="18"style="">fjhv j</option>
                </optgroup>
            </select>
        </div>
        <div class="statusess" style="display: inline;">
            <select name="statusess">
                <option value="">Select a Status</option>
                <option value="1">opt8</option>
                <option value="2">opt9</option>
            </select>
        </div>
        <div class="ok" style="display: none;">
            Everything looks good!
        </div>
        <div class="notOk" style="display: none;">
            Something went wrong!
        </div>
        <div class="loadingGif" style="display: none;">
            Loading...
            <img src="/Content/Images/ajax-loader/253L.gif" alt=""/>
        </div>
    </div>
</div>

新的 jQuery/JavaScript

$(document).ready(function () {

    var Maindiv = $("#MainDiv");
    var toClone = $(".toClone");

    $("#MainDiv").delegate('.statusess', 'change', function () {
        var thisSel = $(this).children("select");
        var prevSel = $(this).parent().children(".tasksess").children("select");
        var divOk = $(this).parent().children(".ok");
        var divNotOk = $(this).parent().children(".notOk");
        var divLoad = $(this).parent().children(".loadingGif");

        if (thisSel.val() != "") {
            console.log("status changed to val " + thisSel.val());
            if (prevSel.val() != "") {
                console.log("task is val "+prevSel.val());

                divLoad.attr("style", "display: inline;");
                var url = '/ProjectAdmin/Project/AddTaskDependency';
                url += '?MainTaskId=' + $("#TaskId").val();
                url += '&DependentTaskId=' + prevSel.val();
                url += '&Status=' + thisSel.val();
                console.log("URL= "+url);
                /*
                $.ajax({
                    url: url, type: 'GET',
                    success: function (data, status) {
                        if (data != "0") {
                            divOk.attr("style","display:inline;");
                            divNotOk.attr("style","display:none;");
                        }
                        else if (data == "0") {
                            divOk.attr("style","display:none;");
                            divNotOk.attr("style","display:inline;");
                        }
                    }
                });
                */
                divLoad.attr("style", "display: none;");
                var div = $('div:eq(0)', Maindiv).clone();
                Maindiv.append(div);

            } else { alert("Select 1 val is empty"); }
        } else { alert("Select 2 val is empty"); }
    });

});

score 0 · Accepted Answer

以下行不正确：

$$("#MainDiv").delegate('#Statusess', 'change', function () {

更改$$("#MainDiv")为$("#MainDiv")。

jquery - jQuery 不会更改标签的 Css 或者可能找不到标签

3 回答 3

Related

Reference