Необходимо использовать класс, определенный на странице «Управление» в JQuery - MVC2

Question

Это моя контрольная страница, класс которой называется AboutModels

public ActionResult About()
{
    AboutModels ObjAM = new AboutModels();
    List<PollOption> polloptions = new List<PollOption>();
    polloptions = ObjAM.dbValue();
    ViewData["polloptions"] = polloptions.ToList();
    return View();
}

Я хочу использовать этот класс для анализа, о котором я упоминал (здесь нужно вставить объект) этой страницы JQuery

function Button1_onclick() {
    var currentWidth = parseInt($(".bgDiv").css("width")); //Getting the curent width.

    alert(currentWidth);
    $("**Need to Insert Object here**").css("width", currentWidth + 20 + "px");  // Adding 20px to the current width.
}

Пожалуйста, сообщите.

<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">.
    <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">

        $(document).ready(function () {
            alert("jQuery page");
            $(".easy_editor").css("background-color", "Red"); // Here im setting the background color of the div with className changingDIV
            $(".easy_editor").css("width", 0);

            $('#myButton').live('click', function () {
                var currentWidth = parseInt($(".bgDiv").css("width")); //Getting the curent width.
                var abc = '<%=Model.AboutModels%>';
                alert(currentWidth);
                $(".easy_editor").css("width", currentWidth + 20 + "px");  //I want to use Hello_World_MVC.PollOption> class instead of easy_editor
            });
        });

    </script>

    <% using (Html.BeginForm()) { %>

        <h2>About</h2>
        <p>
            <input value="Enter the value" />
            <input type="submit" value="ClickHere" />
            <%--
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
            --%>
        </p>

        <table>
        <tr>
            <td>
                <% foreach (var obj in (List<Hello_World_MVC.PollOption>)ViewData["polloptions"]) { %>
                    //Here is my dynamic class I want to use this same class to the above jquery - Instead of .bgDiv
                    <%-- <div class="<%= obj.OptionID + "1" %>">--%>
                    <div class="bgDiv">
                        <input type="checkbox" name="SelectedObject" value="<%=obj.OptionID%>"/>
                        <%= obj.OptionName %>

                    </div>
                <% } //foreach %>
                <input id="myButton" type="button" />
            </td>
        <%-- <%=Html.CheckBox("<%=obj.OptionName%>",  --%>
        </tr>
        </table>
    <% } //using (endform) %>
</asp:Content>

Answer 1

Я до сих пор не понимаю, что именно вы после ... но я буду стараться изо всех сил.

Если вы сделаете что-то вроде этого:

<% foreach (var obj in (List<Hello_World_MVC.PollOption>)ViewData["polloptions"]) { %>
    <div id="checkBoxDiv<%= obj.OptionID %>" class="bgDiv">
        <input type="checkbox" name="SelectedObject" value="<%=obj.OptionID%>"/>
        <%= obj.OptionName %>
    </div>
<% } %>

Вы должны получитьцелый набор элементов с разными идентификаторами (например, 'checkBoxDiv1', 'checkBoxDiv2', ... 'checkBoxDivN'), но все они будут иметь один и тот же класс - 'bgDiv'.

Теперь, если вы хотите получитьвсе div в jQuery, которые вы делаете:

$('.bgDiv')

Но если вам нужен отдельный div, вы можете использовать id.Например,

$('#checkBoxDiv4')

Но если вы хотите получить checkBox по идентификатору внутри нажатия кнопки, необходимо больше контекста, потому что кнопка находится вне цикла и не имеет представления о каждом входном элементе div.

РЕДАКТИРОВАТЬ : Чтобы увеличить ширину каждого деления на 10px, начиная с 10px, вы можете сделать это:

$('.bgDiv').each(function (index) {
    var newWidth = (index + 1) * 10;
    $(this).width(newWidth);
});