Question

当div标签字段中设置了值时，我有两个<a>个date-id链接与div标记id相同。 <a>链接应将颜色更改为绿色。我想知道如何做到这一点，

我的<a>菜单看起来：

 <div class="wrapper">   
                    <div class="parent">  
                        <a data-id="6" data-counter="0" href="#" class="box navigation"></a>
                        <p>1</p>   
                    </div>  
                    <div class="parent">
                        <a data-id="7" data-counter="1" href="#" class="box navigation"></a>
                        <p>2</p>
                    </div>
</div>

我的带有字段的div标签如下所示：

<div class="wizard-step2" id="6">
    <p>1. how are you? <span class="b">Betyg:&nbsp;&nbsp;
    <select class="Grade" id="selectetListItems" name="selectetListItems"><option value="">n/a</option>
    <option value="1">1</option>
    <option value="2">2</option>
    </select></span></p>
    <div class="editor-field">
        <textarea class="Comment" cols="20" id="selectstyle3" name="Comment" rows="2">
</textarea>
    </div>
    <input class="QuestionID" id="SelectedQuestions" name="QuestionID" type="hidden" value="18" />
</div>

<div class="wizard-step2" id="7">
    <p>1. how are you? <span class="b">Betyg:&nbsp;&nbsp;
    <select class="Grade" id="selectetListItems" name="selectetListItems"><option value="">n/a</option>
    <option value="1">1</option>
    <option value="2">2</option>
    </select></span></p>
    <div class="editor-field">
        <textarea class="Comment" cols="20" id="selectstyle3" name="Comment" rows="2">
</textarea>
    </div>
    <input class="QuestionID" id="SelectedQuestions" name="QuestionID" type="hidden" value="18" />
</div>

我所做的是点按钮上的ajax帖子和帖子内部我需要此功能，如果id为6的div标签填充了其字段，则将具有相同data-id的链接更改为绿色：

这是我的点击：

$("#next-step").click(function () {
            var $step = $(".wizard-step2:visible"); // get current div step
            var validator = $("form").validate(); // obtain validator
            var anyError = false;

            var Comment = $step.find(".Comment").val();
            var QuestionID = $step.find(".QuestionID").val();
            var Grade = $step.find(".Grade").val();

            var data =
                {
                    Comment: Comment,
                    QuestionID: QuestionID,
                    Grade: Grade
                };
            $.post('@Url.Action("AnswerForm", "AnswerNKI")', data, function () {

                if (Comment != null && Grade > 0) {

               $(".box").css({ "background-color": "green" });

                }

            });

如果您在我的Post内查看，我刚刚进行了测试，将.box更改为绿色，这会将所有<a>链接更改为绿色，但这是错误的。如果声明我需要帮助，那就在里面。

感谢任何帮助！

提前致谢！

Answer 1

我假设，在此示例中，$(this)将是$('#6') div元素，而也表示您的if条件评估正确：

if (Comment != null && Grade > 0) {
    $('a[data-id="' + this.id + '"]').css({ "background-color": "green" });
}

假设，如在您发布的示例中，单击位于$('#6')，这将从id检索this（在这种情况下不需要包装在jQuery对象中），并将其连接到选择器中，以有效地$('a[data-id="6"]')，然后将该链接更改为background-color green。

参考文献：

[attribute="value"] attribute-equals selector。

Answer 2

尝试：

$(".box[data-id='" + ID-that-needs-changing + "']").css({ "background-color": "green" });

这基本上会查找box类，data-id等于您在帖子后获得的ID。

更改特定<a> tag that have same id as the div tag if div tag fields are filled</a>的颜色

2 个答案: