QuestionPopupFor Html Helper

Question

当我们进入问号 [我有问号的图像] 符号 [?] 时，我需要打开一个 jquery 弹出窗口。我在一个名为 [Edit.cshtml] 的视图上有 3 个问号符号。

1)

HQ Compatible 意味着 HRA 结果将用于在 MyHealth 报告上创建健康商数分数。

2)

如果问卷设置为激活的“否”，则所有已配置合同的问卷演示将终止。将 Active 设置为“No”将不允许将调查问卷添加到任何新合同中。

3)

如果调查问卷被“锁定”，则调查问卷将保持存在于配置有调查问卷的任何有效合同中。任何新的合同都不允许添加问卷。

我写了一个j查询函数，调用了上面三个：

        $('#iconQuestionActiveImageDiv').dialog({
            autoOpen: false,
            draggable: true,
            resizable: false,
            closeText: 'X',
            height: 140,
            width: 200
        });
        $('.iconQuestionActiveImage').mouseover(function(e) {
            e.preventDefault();
            $('#iconQuestionActiveImageDiv').show();
            $('#iconQuestionActiveImageDiv').dialog({ position: [e.pageX, e.pageY] });
            $('#iconQuestionActiveImageDiv').dialog('open');
            $('.ui-dialog-title').text('Active options');
            return true;
        }).mouseout(function() {
            $('#iconQuestionActiveImageDiv').dialog('close');
            $('#iconQuestionActiveImageDiv').hide();
        });

        // 2. Locked option
        $('#iconQuestionLockedImageDiv').dialog({
            autoOpen: false,
            draggable: true,
            resizable: false,
            closeText: 'X',
            height: 140,
            width: 200
        });

        $('.iconQuestionLockedImage').mouseover(function(e) {
            e.preventDefault();
            $('#iconQuestionLockedImageDiv').show();
            $('#iconQuestionLockedImageDiv').dialog({ position: [e.pageX, e.pageY] });
            $('#iconQuestionLockedImageDiv').dialog('open');
            $('.ui-dialog-title').text('Active options');
            return true;
        }).mouseout(function() {
            $('#iconQuestionLockedImageDiv').dialog('close');
            $('#iconQuestionLockedImageDiv').hide();
        });

        // 3. HQ Compatible Option
        $('#iconQuestionHQCompatibleImageDiv').dialog({
            autoOpen: false,
            draggable: true,
            resizable: false,
            closeText: 'X',
            height: 140,
            width: 200
        });

        $('.iconQuestionHQCompatibleImage').mouseover(function(e) {
            e.preventDefault();
            $('#iconQuestionHQCompatibleImageDiv').show();
            $('#iconQuestionHQCompatibleImageDiv').dialog({ position: [e.pageX, e.pageY] });
            $('#iconQuestionHQCompatibleImageDiv').dialog('open');
            $('.ui-dialog-title').text('Active options');
            return true;
        }).mouseout(function() {
            $('#iconQuestionHQCompatibleImageDiv').dialog('close');
            $('#iconQuestionHQCompatibleImageDiv').hide();
        });
    });

一切正常。

但是有什么方法可以传递我创建的 div 的 id 以减少代码的长度。

L*** 建议我使用 QuestionPopupFor Html Helper，它可以让您在 4 个地方执行此操作，而无需复制多个代码。

任何想法，请回复。

---

$('.iconQuestionHQCompatibleImage').mouseover(function(e) { e.preventDefault();

            @Html.QuestionPopupFor("#iconQuestionHQCompatibleImageDiv");
            //$('#iconQuestionHQCompatibleImageDiv').show();
            //$('#iconQuestionHQCompatibleImageDiv').dialog({ position: [e.pageX, e.pageY] });
            //$('#iconQuestionHQCompatibleImageDiv').dialog('open');
            //$('.ui-dialog-title').text('Active options');

            return true;
        }).mouseout(function () {
            @Html.QuestionPopupClose("#iconQuestionHQCompatibleImageDiv");

            //$('#iconQuestionHQCompatibleImageDiv').dialog('close');
            //$('#iconQuestionHQCompatibleImageDiv').hide();
        });

我正在尝试以这种方式使用，但它不起作用。

我正在 Html Helper 类中编写一个 jquesry 逻辑，如下所示：

public static string QuestionPopupFor(this HtmlHelper helper, string divTag) { var javascript = string.Empty; //javascript = string.Concat(javascript, "$('", divTag, "').dialog({ autoOpen: false, draggable: true,resizable: false, closeText: 'X',height: 140, width: 200 )");

            javascript = string.Concat(javascript, "$('", divTag, "').show()");
            javascript = string.Concat(javascript, "$('", divTag, "').dialog({ position: [e.pageX, e.pageY] })");
            javascript = string.Concat(javascript, "$('", divTag, "').dialog('open')");
            javascript = string.Concat(javascript, "$('.ui-dialog-title').text('Active options')");

            return javascript;
        }

        public static string QuestionPopupClose(this HtmlHelper helper, string divTag)
        {
            var javascript = string.Empty;
            javascript = string.Concat(javascript, "$('", divTag, "').dialog('close')");
            javascript = string.Concat(javascript, "$('", divTag, "').hide()");

            return javascript;
        }

Answer 1

我处理这个问题的方法是将每个问号设置为具有相同的类（大概是这样），并在该类上为 mouseenter 添加一个事件侦听器，如下所示：

$(".questionMark").on("mouseenter", function(){
    //do stuff
});

我还会给每个问号一个自定义的data 属性（例如data-text），其中包含描述（假设描述不是太复杂）。这样，您可以执行以下操作：

$(".questionMark").on("mouseenter", function(){
    $("#popup").text($(this).data("text")).show();
});

然后关闭它：

$(".questionMark").on("mouseleave", function(){
    $("#popup").hide();
});

请注意，如果您想使用这样的库，您可以获取并传递 ID 以及 mouseenter 侦听器中的任何其他内容，而不是使用我的建议。

如果您想将 ID 或任何其他属性传递给函数，请在 mouseenter 事件侦听器中执行以下操作：

var id = $(this).attr('id');
myFunctionCall(id);