CODEWITHSUNDEEP
jquerycssasp.net-mvc
TheDoc
TheDoc

Reputation: 718

Change CSS on all other items

I'm very new to ASP.Net and know very little about Javascript/jQuery, but I have an MVC app I'm working on to learn. I have the Index view set up and everything is working fine, but I want to change the CSS style on all the items besides the one I clicked on. I want to do this in the script, but I don't know enough JS/JQ to do it and I can't seem to find any info by searching...I feel it's probably a problem with my search. Anyone able to assist?

@section scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            $('[name^=project]').click(function (e) {
                $('#partial').load($(this).data("url"))
            })
        })
    </script>
}

<h2>Active Projects</h2>

<div class="project-list">
    @foreach (var item in Model)
    {
        <div class="mig-project @item.ColorClass" name="[email protected]" data-url="@Url.Action("LoadPartialView", "MMC", new { server = @item.ServerName })">
            <div>
                <div class="client-name">@item.Client</div>
                <div class="source-target">@item.SourceTarget</div>
                <div class="server-name">@item.ServerName</div>
                <div class="error-count">@item.ErrorCount</div>
            </div>
        </div>
    }
</div>

<div id="partial"></div>

Upvotes: 0

Views: 50

Answers (1)

Nyxeen
Nyxeen

Reputation: 181

Heyho,

maybe it helps you to use $('.allItems').not('.specificItem') as a selection.

@section scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            $('.mig-project').click(function (e) {
                $('#partial').load($(this).data("url"));
                $('.mig-project').not(this).css("background", "red");//or Whatever
            })
        })
    </script>
}

<h2>Active Projects</h2>

<div class="project-list">
    @foreach (var item in Model)
    {
        <div class="mig-project @item.ColorClass" name="[email protected]" data-url="@Url.Action("LoadPartialView", "MMC", new { server = @item.ServerName })">
            <div>
                <div class="client-name">@item.Client</div>
                <div class="source-target">@item.SourceTarget</div>
                <div class="server-name">@item.ServerName</div>
                <div class="error-count">@item.ErrorCount</div>
            </div>
        </div>
    }
</div>

<div id="partial"></div>

Upvotes: 3

Related Questions