Javascript onclick не работает, несколько картинок нажимаются подряд - PullRequest
Новая
       0

Javascript onclick не работает, несколько картинок нажимаются подряд

0 голосов
/ 02 июня 2018

Я попытался объединить код, который я нашел (я не очень хорошо знаю JS), и я нажимаю на изображение в DOM (mockup2.png), но ничего не происходит.Предполагается, что он перейдет к mockup3.png, а затем еще один щелчок приведет его к mockup4.png и т. Д. Для контекста, некоторый другой код использует Bootstrap и 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>

Пробует 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>

Ответы [ 2 ]

0 голосов
/ 02 июня 2018

Я думаю, вы должны попробовать этот код JQuery.Для облегчения понимания сохраняйте короткое имя изображения в теге alt img, чтобы различать при каждом щелчке и изменять имя изображения при каждом щелчке для следующего изображения.Я надеюсь, что это поможет ..! 

$('#wireframe-student').on('click', function(){
    var img_src = $(this).attr('alt');
    if(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'});
    } else {
        /* carry onn..... */
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
    <div class="col-md-12">
        <img id="wireframe-student" src="http://via.placeholder.com/150x150" width="" class="img-responsive" alt="image1" />
    </div>
</div>
0 голосов
/ 02 июня 2018

попробуйте изменить это 

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" />;

на 

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

Я изменил код во втором блоке, вы можете обратиться к нему здесь

https://jsfiddle.net/3pan85xv/

только часть после клика, более читаемая, чем цикл if 

<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>

новая скрипка с изменениями, которые я только что сделал https://jsfiddle.net/shyamjoshi/qoa3jfq1/1/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...