2017-06-18 6 views
0

私は簡単な小さなページを作成しています。私はJavaScriptを学んでいて、使い慣れたものを使っています。画像をクリックすると引用符が変わるページを作成することができました。さて、私は引用符でイメージを変更します。画像2をクリックすると、画像3は引用符3で表示されます。イメージをクリックして見積もりを変更しますか?

これはかなり簡単な作業ですが、私はできませんでした。簡単な解決策を見つける。私はこれに数時間を費やしました。これはうつ病の一種です。

<!DOCTYPE html> 
<html> 
<head> 
<title>Ida B. Wells</title> 
<link rel="stylesheet" type="text/css" href="styles.css"> 
<script type="text/javascript" src="jquery-3.2.1.min.js"></script> 
<script type="text/javascript" src="script.js"></script> 
</head> 
<body> 
<img id="MainProductImage"" src="https://i.ytimg.com/vi/pUMKFP4p2Lo/maxresdefault.jpg" width="500px"" id="myImg"> 
<h1>“Quote 1.”</h1> 
<p>- Ida B. Wells</p> 
</body> 
</html> 

JavaScriptを::以下は、私はHTMLに持っているものであるhttps://aprilehrlich.github.io/dataint/

:ここ

ページです。ここ

$(document).ready(function() { 
var quote1 = "“Quote 1.”"; 
var quote2 = "“Quote 2”"; 
var quote3 = "“Quote 3”"; 
var quote4 = "“Quote 4”"; 
var quote5 = "“Quote 5”"; 
var quote6 = "“Quote 6”"; 
var quote7 = "“Quote 7”"; 
var quote8 = "“Quote 8”"; 
var quote9 = "“Quote 9”"; 
var quote10 = "“Quote 10”"; 
$("img").click(function() { 
    var currentQuote = $("h1").text(); 
    $("h1").fadeOut(0); 
    if (currentQuote == quote1) { 
     $("h1").text(quote2); 
    } 
    if (currentQuote == quote2) { 
     $("h1").text(quote3); 
    } 
    if (currentQuote == quote3) { 
     $("h1").text(quote4); 
    } 
    if (currentQuote == quote4) { 
     $("h1").text(quote5); 
    } 
    if (currentQuote == quote5) { 
     $("h1").text(quote6); 
    } 
    if (currentQuote == quote6) { 
     $("h1").text(quote7); 
    } 
    if (currentQuote == quote7) { 
     $("h1").text(quote8); 
    } 
    if (currentQuote == quote8) { 
     $("h1").text(quote9); 
    } 
    if (currentQuote == quote9) { 
     $("h1").text(quote10); 
    } 
    $("h1").fadeIn(1000); 
}); 
}) 

答えて

1

src要素を変更するには、attr(属性)関数を使用する必要があります。ここに例があります。あなたのコードを変更することなく、望むようにあなたができるだけ多くの引用符を設定することができますので、私はもう少し動的なコードを作っ:

HTML:

<img id="MainProductImage" src="https://s-media-cache-ak0.pinimg.com/564x/2a/b4/e7/2ab4e74ad637f9c8ecb792b8b7d605a6.jpg" id="myImg" data-current-quote="0"> 
<h1>“Quote 1.”</h1> 
<p>- Ida B. Wells</p> 

Javascriptを:

$(document).ready(function(){ 
    //Quotes/Image Array 
    var quotes = [ 
     { quote: "Quote1", img: "https://s-media-cache-ak0.pinimg.com/564x/2a/b4/e7/2ab4e74ad637f9c8ecb792b8b7d605a6.jpg"}, 
     { quote: "Quote2", img: "https://s-media-cache-ak0.pinimg.com/564x/af/52/03/af5203d09a0be9c9e655786c88c1d8b7.jpg"}, 
     { quote: "Quote3", img: "https://s-media-cache-ak0.pinimg.com/564x/04/37/3c/04373c4f98797b202d13b9882e137690.jpg"} 
    ]; 

    $("img").click(function(){ 

     var img = $("#MainProductImage"), 
      //We look for the next quote, if it's the last we go to the beginning 
      currentQuote = img.data("current-quote") === quotes.length -1 ? 0 : img.data("current-quote") + 1, 
      nextQuote = quotes[currentQuote]; 

     //Set the current quote index in a data attribute 
     img.data("current-quote", currentQuote); 
     $("h1").fadeOut(0); 
     //Change the text 
     $("h1").text(nextQuote.quote); 
     //Change the image 
     img.attr("src", nextQuote.img); 
    }); 
}); 

フィドル:https://jsfiddle.net/p2bus29y/2/

0
var data = [ 
    { 
     "CategoryID": 1, 
     "CategoryName": "Soler Power Plant", 
     "CategoryProducts": [ 
     { 
      "ID": 1, 
      "Name": 'Commercial Solar Power Plant', 
      "SubTitle": 'Eco, Eco Friendly, Energy, Green, Solar', 
      "Brand": 'ACS', 
      "Usage": '', 
      "Type": '', 
      "Price": 'Rs 5 Lakh/Unit', 
      "Body_Material": '', 
      "Description": 'Having a pre-determined quality administration system, we are thoroughly involved in delivering Commercial Solar Power Plant.', 
      "ImageUrl": 'assets/images/Products/Sola-power-plant.jpg', 
     }, 
     { 
      "ID": 2, 
      "Name": 'Industrial Solar Power Plants', 
      "SubTitle": 'Eco Friendly, Save Energy', 
      "Brand": 'ACS', 
      "Usage": '', 
      "Type": '', 
      "Price": 'Rs 5 Lakh/Unit', 
      "Body_Material": '', 
      "Description": 'So as to become a preferential business name, we are thoroughly engrossed in shipping an inclusive collection of Industrial Solar Power Plants.', 
      "ImageUrl": 'assets/images/Products/Industrial_Solar_Power_Plants.jpg', 
     }, 
     { 
      "ID": 3, 
      "Name": 'On Grid Solar Plant', 
      "SubTitle": 'Eco Friendly, Save Energy', 
      "Brand": 'ACS', 
      "Usage": '', 
      "Type": '', 
      "Price": 'Rs 1.1 Lakh/Unit', 
      "Body_Material": '', 
      "Description": "We are the leading firm of On Grid Solar Plant. To sustain the quality, our products are made under the guidance of industry certified professionals.", 
      "ImageUrl": 'assets/images/Products/On_Grid_Solar_Plant.jpg', 
     }, 
      { 
       "ID": 4, 
       "Name": 'On Grid Solar Power Plant', 
       "SubTitle": 'Eco Friendly, Save Energy', 
       "Brand": 'ACS', 
       "Usage": '', 
       "Type": '', 
       "Price": 'Rs 5 Lakh/Unit', 
       "Body_Material": '', 
       "Description": "We are the leading firm of On Grid Solar Power Plant. To sustain the quality, our products are made under the guidance of industry top professionals.", 
       "ImageUrl": 'assets/images/Products/On_Grid_Solar_Power_Plant.jpg', 
      }, 
      { 
       "ID": 5, 
       "Name": 'Solar Power Plant', 
       "SubTitle": 'Eco Friendly, Save Energy', 
       "Brand": 'ACS', 
       "Usage": '', 
       "Type": '', 
       "Price": 'Rs 5 Lakh/Unit', 
       "Body_Material": '', 
       "Description": "We are the leading firm of Solar Power Plant. To sustain the quality, our products are made under the guidance of industry certified professionals.", 
       "ImageUrl": 'assets/images/Products/Solar_Power_Plant.jpg', 
      }, 
     ] 
    } 
] 




function GetProducts() { 

      var products = data; 

      $.each(products, function() { 

       //var product = products.filter(filterByID) 
       var product = this; 
       $('#ProductDetails').append('<h2 class="text-center">' + this.CategoryName + '</h2>'); 
       var details = product; 
       $.each(details.CategoryProducts, function() { 


        tempData = tempData + '<div class="col-md-4 col-sm-6">' + 
            '<div class="project-box">' + 
             '<div class="frame-outer">' + 
              '<div class="frame">' + 
               '<img style="width:350px;" src="' + this.ImageUrl + '" class="attachment-340x220 size-340x220 wp-post-image" alt="">' + 
              '</div>' + 
             '</div>' + 
             '<div class="text-box">' + 
              '<h3><a>' + this.Name + '</a></h3>' + 
              '<div class="tags-row">' + 
               '<a class="link">' + this.SubTitle + '</a>' + 
              '</div>' + 
              '<p>' + this.Description + '</p>' + 
              //'<a href="javascript:ViewMore(' + this.ID + ')" class="btn-readmore">More Details</a>' + 
             '</div>' + 
            '</div>' + 
           '</div>'; 
       }); 

       $('#ProductDetails').append('<div class="row">' + tempData + '</div>'); 
       tempData = ''; 

      }); 
     } 

、それは私自身のコードがあることもありますそれはあなたを助けます。これはあなたのコードに属しませんが、あなたはこのようにする必要があります。

0

引用元と画像ソースで配列を作成しました。私は、配列のインデックスを定義するためにカウンタをインクリメントしました。私もそれを作ったので、一旦すべてが完了すると引用符が消えるので、テキストは消えてしまうまで変化しません。

$(document).ready(function(){ 
 
    // set array of quotes and images 
 
    var content = [ 
 
    ["“Quote 1.”", "https://i.ytimg.com/vi/pUMKFP4p2Lo/maxresdefault.jpg"], 
 
    ["“Quote 2.”", "http://www.stevensegallery.com/460/300"], 
 
    ["“Quote 3.”", "http://www.stevensegallery.com/300/200"], 
 
    ["“Quote 4.”", "http://www.stevensegallery.com/460/300"], 
 
    ["“Quote 5.”", "http://www.stevensegallery.com/300/200"], 
 
    ["“Quote 6.”", "http://www.stevensegallery.com/284/196"], 
 
    ["“Quote 7.”", "http://www.stevensegallery.com/300/200"], 
 
    ["“Quote 8.”", "http://www.stevensegallery.com/460/300"], 
 
    ["“Quote 9.”", "http://www.stevensegallery.com/300/200"], 
 
    ["“Quote 10.”", "http://www.stevensegallery.com/284/196"], 
 
    ]; 
 
    // set counter to 1 
 
    var count = 1; 
 
    $("img").click(function(){ 
 
    // check is end of array reached and start from beginning 
 
    count == content.length ? count = 0 : ""; 
 
    // fade h1 out 
 
    $("h1").fadeOut(500, function() { 
 
     // use counter to get the correct index of array to change the h1 to the relevent quote 
 
     $("h1").text(content[count][0]); 
 
     // use counter to get the correct index of array to change the h1 to the relevent image source 
 
     $("img").attr("src", content[count][1]); 
 
     // fade h1 back in after everything else is done 
 
     $("h1").fadeIn(500); 
 
     // increment count by 1 
 
     count++; 
 
    }); 
 
    }); 
 
});
<img id="MainProductImage"" src="https://i.ytimg.com/vi/pUMKFP4p2Lo/maxresdefault.jpg" width="500px"" id="myImg"> 
 
<h1>“Quote 1.”</h1> 
 
<p>- Ida B. Wells</p> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

関連する問題