Javascript onclick不起作用，需要在一行中单击多个图像_Javascript_Html_Razor

Javascript onclick不起作用，需要在一行中单击多个图像

javascript html razor

Javascript onclick不起作用，需要在一行中单击多个图像,javascript,html,razor,Javascript,Html,Razor,我尝试组合我找到的代码（我不太了解JS），然后在DOM中单击图像（mockup2.png），但什么也没发生。它应该转到mockup3.png，然后再单击一次，它就会转到mockup4.png等。对于上下文，其他一些代码使用引导和Razor。你知道为什么点击什么都不做吗 @{ ViewBag.Title = "Marketplace"; } <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.

我尝试组合我找到的代码（我不太了解JS），然后在DOM中单击图像（mockup2.png），但什么也没发生。它应该转到mockup3.png，然后再单击一次，它就会转到mockup4.png等。对于上下文，其他一些代码使用引导和Razor。你知道为什么点击什么都不做吗

@{
    ViewBag.Title = "Marketplace";
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="~/Content/Login.css" />
<link rel="stylesheet" type="text/css" href="~/Content/Site.css" />

<script>
    $(document).ready(
    function () {
        $('#studentnavicons a').hover(
            function () {
                $("#studentnaviconstext p").text($(this).attr("title"));
            }
    });
</script>

<script type="text/javascript">
    var checkbox = document.getElementById('wireframe-student');
    var img = <img src="~/Content/img/Student Market/market_mockup2.png" />;
    var img1 = <img src="~/Content/img/Student Market/market_mockup3.png" />;
    var img2 = <img src="~/Content/img/Student Market/market_mockup4.png" />;
    var img3 = <img src="~/Content/img/Student Market/market_mockup5.png" />;

    checkbox.onclick = function () {
        if (checkbox.src == img) {
            checkbox.src = img1;
        } else if (checkbox.src == img1) {
            checkbox.src = img2;
        } else if (checkbox.src == img2) {
            checkbox.src = img3;
        } else {
            checkbox.src = img3;
        }
    }
</script>

<div class="background">
    <div class="row text-center">
        <h1 class="student-header" align="center">Marketplace</h1>
            <div id="studentnavicons">
                <a href="~/Student/Default" title="Store"><i class="fas fa-store-alt" style="color:#7a553b"></i></a>
                <a href="~/Student/Community" title="Community"><i class="fas fa-map-signs" style="color:#7a553b"></i></a>
                <a href="~/Student/Market" title="Marketplace"><i class="fas fa-shopping-cart" style="color:#7a553b"></i></a>
                <a href="~/Student/Accomplishments" title="Yep, I did this"><i class="fas fa-trophy" style="color:#7a553b"></i></a>
                <a href="~/Student/Avatar" title="Avatar"><i class="fas fa-user" style="color:#7a553b"></i></a>
                <a href="~/Portal/Logout" title="Logout"><i class="fas fa-sign-out-alt" style="color:#7a553b"></i></a>
            </div>
        </div>

    <div class="row">
        <div class="col-md-12">
                <div class="boxed" align="center">
                    <font size="10">Points: 150</font>
                </div>
                <img id="wireframe-student" src="~/Content/img/Student Market/market_mockup2.png" width="1000" class="img-responsive"  />

                <div class="col-md-4">

                    <div style="float: right; margin-top:-70px;" align="center">
                        @Html.ActionLink("Sell", "MarketAfter", "Student", null, new { @class = "btn btn-primary" })
                    </div>
                </div>
                <div class="col-md-4">
                    <div style="float:right; margin-top:-70px;" align="center">
                        @Html.ActionLink("Buy", "MarketAfter", "Student", null, new { @class = "btn btn-primary" })
                    </div>
                </div>
            </div>
    </div>
</div>

@{
ViewBag.Title=“市场”；
}
$（文件）。准备好了吗(
函数（）{
$（“#学生导航a”）。悬停(
函数（）{
$（“#studentnavicontext p”）.text（$（this.attr（“title”））；
}
});
var checkbox=document.getElementById（'wireframe-student'）；
var-img=；
var img1=；
var img2=；
var img3=；
checkbox.onclick=函数（）{
如果（checkbox.src==img）{
checkbox.src=img1；
}else if（checkbox.src==img1）{
checkbox.src=img2；
}else if（checkbox.src==img2）{
checkbox.src=img3；
}否则{
checkbox.src=img3；
}
}
市场
积分：150
@ActionLink（“Sell”、“MarketAfter”、“Student”、null、new{@class=“btn btn primary”}）
@ActionLink（“购买”、“MarketAfter”、“学生”、空、新{@class=“btn btn primary”}）

尝试JQuery，但仍然没有结果：

@{
    ViewBag.Title = "Marketplace";
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="~/Content/Login.css" />
<link rel="stylesheet" type="text/css" href="~/Content/Site.css" />

<script>
    $(document).ready(
        function () {
            $('#studentnavicons a').hover(
                function () {
                    $("#studentnaviconstext p").text($(this).attr("title"));
                }
    });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    $('#wireframe-student').on('click', function () {
        var img_src = $(this).attr('alt');
        if (img_src == 'image1') {
            $(this).attr({ src: '/Content/img/Student Market/Market_demo3.png', alt: 'image2' });
        } else if (img_src == 'image2') {
            $(this).attr({ src: '/Content/img/Student Market/Market_demo4.png', alt: 'image3' });
        } else if (img_src == 'image3') {
            $(this).attr({ src: '/Content/img/Student Market/Market_demo5.png', alt: 'image4' });
        } else {
            /* carry on..... */
        }
    });
</script>

<div class="background">
    <div class="row text-center">
        <h1 class="student-header" align="center">Marketplace</h1>
        <div id="studentnavicons">
            <a href="~/Student/Default" title="Store"><i class="fas fa-store-alt" style="color:#7a553b"></i></a>
            <a href="~/Student/Community" title="Community"><i class="fas fa-map-signs" style="color:#7a553b"></i></a>
            <a href="~/Student/Market" title="Marketplace"><i class="fas fa-shopping-cart" style="color:#7a553b"></i></a>
            <a href="~/Student/Accomplishments" title="Yep, I did this"><i class="fas fa-trophy" style="color:#7a553b"></i></a>
            <a href="~/Student/Avatar" title="Avatar"><i class="fas fa-user" style="color:#7a553b"></i></a>
            <a href="~/Portal/Logout" title="Logout"><i class="fas fa-sign-out-alt" style="color:#7a553b"></i></a>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="boxed" align="center">
                <font size="10">Points: 150</font>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <img id="wireframe-student" src="/Content/img/Student Market/Market_demo2.png" width="1000" class="img-responsive" alt="image1" />
                </div>
            </div>

            <div class="col-md-4">

                <div style="float: right; margin-top:-70px;" align="center">
                    @Html.ActionLink("Sell", "MarketAfter", "Student", null, new { @class = "btn btn-primary" })
                </div>
            </div>
            <div class="col-md-4">
                <div style="float:right; margin-top:-70px;" align="center">
                    @Html.ActionLink("Buy", "MarketAfter", "Student", null, new { @class = "btn btn-primary" })
                </div>
            </div>
        </div>
    </div>
</div>

@{
ViewBag.Title=“市场”；
}
$（文件）。准备好了吗(
函数（）{
$（“#学生导航a”）。悬停(
函数（）{
$（“#studentnavicontext p”）.text（$（this.attr（“title”））；
}
});
$（“#线框学生”）。在（'click'，函数（）{
var img_src=$（this.attr（'alt'）；
如果（img_src=='image1'）{
$（this.attr（{src:'/Content/img/Student Market/Market_demo3.png'，alt:'image2'}）；
}else if（img_src=='image2'）{
$（this.attr（{src:'/Content/img/Student Market/Market_demo4.png'，alt:'image3'}）；
}else if（img_src=='image3'）{
$（this.attr（{src:'/Content/img/Student Market/Market_demo5.png'，alt:'image4'}）；
}否则{
/*继续*/
}
});
市场
积分：150
@ActionLink（“Sell”、“MarketAfter”、“Student”、null、new{@class=“btn btn primary”}）
@ActionLink（“购买”、“MarketAfter”、“学生”、空、新{@class=“btn btn primary”}）

尝试更改此选项

var checkbox = document.getElementById('wireframe-student');
    var img = <img src="~/Content/img/Student Market/market_mockup2.png" />;
    var img1 = <img src="~/Content/img/Student Market/market_mockup3.png" />;
    var img2 = <img src="~/Content/img/Student Market/market_mockup4.png" />;
    var img3 = <img src="~/Content/img/Student Market/market_mockup5.png" />;

我在第二块修改了代码你可以在这里引用

单击后的部分更具可读性，然后单击if-else循环

<script>
$(function() {
  // Handler for .ready() called.

    $('#wireframe-student').on('click', function () {
        var img_src = $(this).attr('alt');

        switch(img_src){

          default : 
         case 'image1': $(this).attr({ src: '/Content/img/Student Market/Market_demo3.png', alt: 'image2' });
                                break;
          case 'image2': $(this).attr({ src: '/Content/img/Student Market/Market_demo4.png', alt: 'image3' });
                                break;

           case 'image3': $(this).attr({ src: '/Content/img/Student Market/Market_demo5.png', alt: 'image4' });
                  break;




        } 
    });
    });
</script>


$（函数（）{
//调用了.ready（）的处理程序。
$（“#线框学生”）。在（'click'，函数（）{
var img_src=$（this.attr（'alt'）；
开关（img\U src）{
违约：
案例'image1'：$（this.attr（{src:'/Content/img/Student Market/Market_demo3.png'，alt:'image2'}）；
打破
案例'image2'：$（this.attr（{src:'/Content/img/Student Market/Market_demo4.png'，alt:'image3'}）；
打破
案例'image3'：$（this.attr（{src:'/Content/img/Student Market/Market_demo5.png'，alt:'image4'}）；
打破
} 
});
});

我刚刚做了些新的改动

试着改变一下

var checkbox = document.getElementById('wireframe-student');
    var img = <img src="~/Content/img/Student Market/market_mockup2.png" />;
    var img1 = <img src="~/Content/img/Student Market/market_mockup3.png" />;
    var img2 = <img src="~/Content/img/Student Market/market_mockup4.png" />;
    var img3 = <img src="~/Content/img/Student Market/market_mockup5.png" />;

我在第二块修改了代码你可以在这里引用

单击后的部分更具可读性，然后单击if-else循环

<script>
$(function() {
  // Handler for .ready() called.

    $('#wireframe-student').on('click', function () {
        var img_src = $(this).attr('alt');

        switch(img_src){

          default : 
         case 'image1': $(this).attr({ src: '/Content/img/Student Market/Market_demo3.png', alt: 'image2' });
                                break;
          case 'image2': $(this).attr({ src: '/Content/img/Student Market/Market_demo4.png', alt: 'image3' });
                                break;

           case 'image3': $(this).attr({ src: '/Content/img/Student Market/Market_demo5.png', alt: 'image4' });
                  break;




        } 
    });
    });
</script>


$（函数（）{
//调用了.ready（）的处理程序。
$（“#线框学生”）。在（'click'，函数（）{
var img_src=$（this.attr（'alt'）；
开关（img\U src）{
违约：
案例'image1'：$（this.attr（{src:'/Content/img/Student Market/Market_demo3.png'，alt:'image2'}）；
打破
案例'image2'：$（this.attr（{src:'/Content/img/Student Market/Market_demo4.png'，alt:'image3'}）；
打破
案例'image3'：$（this.attr（{src:'/Content/img/Student Market/Market_demo5.png'，alt:'image4'}）；
打破
} 
});
});

我刚刚做了一些新的修改，我想你应该试试这个jQuery代码。为了便于理解，请在img的alt标记中保留简短的图像名称在每次单击时进行区分，并在每次单击时更改下一个图像的图像名称。我希望这会有帮助

$（“#线框学生”）。在（'click'，function（）上{
var img_src=$（this.attr（'alt'）；
如果（img_src=='image1'）{
$（this.attr（{src:'http://via.placeholder.com/150x160，alt:'image2'}）；
}else if（img_src=='image2'）{
$（this.attr（{src:'http://via.placeholder.com/150x170，alt:'image3'}）；
}else if（img_src=='image3'）{
$（this.attr（{src:'http://via.placeholder.com/150x180，alt:'image4'}）；
}否则{
/*继续*/
}
})；

我想你应该试试这个jQuery代码。为了便于理解，请在img的alt标记中保留简短的图像名称在每次单击和更改图像时进行区分