从html标记<img/>获取数据并转到另一个页面

时间：2016-03-14 03:18:55

标签： javascript html css

正如您所看到的，我正在尝试获取html标记的数据，该标记是<img>标记并获取其src，因此当我将图像拖放到centerbox时它转到特定页面。

问题是，它只会转到第一个if语句中的第一个链接"subpages/rice1.htm"。其他其他如果不能工作。

function doFirst(){
	mypic = document.getElementById('img1');
	mypic.addEventListener("dragstart", startDrag, false);

	mypictwo = document.getElementById('img2');
	mypictwo.addEventListener("dragstart", startDrag2, false);

	mypicthree = document.getElementById('img3');
	mypicthree.addEventListener("dragstart", startDrag3, false);

	mypicfour = document.getElementById('img4');
	mypicfour.addEventListener("dragstart", startDrag4, false);

     centerbox = document.getElementById("mainbox");
     centerbox.addEventListener("dragenter", function(e) {e.preventDefault();}, false);
     centerbox.addEventListener("dragover", function(e) {e.preventDefault();}, false);
     centerbox.addEventListener("drop", dropped, false);
}

//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e){
	var code = '<img id="img1" src="images/rice1.png">';
	e.dataTransfer.setData('Text', code);
}
function startDrag2(e){
	var code = '<img id="img2" src="images/rice2.png">';
	e.dataTransfer.setData('Text', code);
}
function startDrag3(e){
	var code = '<img id="img2" src="images/rice3.png">';
	e.dataTransfer.setData('Text', code);
}
function startDrag4(e){
	var code = '<img id="img2" src="images/rice4.png">';
	e.dataTransfer.setData('Text', code);
}
//--------------drop FUNCTIONS -----------------------//

function dropped(e){
	e.preventDefault();
	centerbox.innerHTML = e.dataTransfer.getData('Text');	
	centerbox.getElementsByTagName("img")[0].style.width = "500px";
 	centerbox.getElementsByTagName("img")[0].style.height = "500px";
}
function drop(event){
	
}
//--------------button functions -----------------------//



function doFunction(){
    if (confirm("Are you sure with the sauce?")) {
        if(centerbox.src == "images/rice1.png") {
            window.location.href = "subpages/rice1.htm";
        }
        else if (centerbox.src == "images/rice2.png") {
            window.location.href = "subpages/rice2.htm";
        }
        else if (centerbox.src == "images/rice3.png") {
            window.location.href = "subpages/rice3.htm";    
        }
    }
}


function reloadPage(){
   if (confirm("You sure want to remove sauce?")) {
   	window.location.reload();	
   	
  }
}

window.addEventListener ("load", doFirst, false);
<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

	<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
	<script src="drag.js"></script>	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
	<div class="row">


		<div class="col-md-3" id="1box">
				<h5>SWEET AND SOUR</h5>	
				<img id="img1" src="images/sauce1.png">
		</div>
		<div class="col-md-3" id="2box">
				<h5>GRAVY</h5>	
				<img id="img2" src="images/sauce2.png">
		</div>
		<div class="col-md-3" id="3box">
				<h5>SALTED EGG</h5>	
				<img id="img3" src="images/sauce3.png">
		</div>
		<div class="col-md-3" id="4box">
				<h5>ORIENTAL SAUCE</h5>	
				<img id="img4" src="images/sauce4.png">
		</div>




	</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-push-3 col-md-4 mainbox" ondrop="drop(event)" id="mainbox">	
					<img id="centerimg" src="images/center.png">
			</div>
			

			

		</div>
		<div class="row">
			<center><h3>Are you sure with the sauce?</h3>
			<button id ="sure" onclick="doFunction(); return false;" type="button" class="btn btn-default" aria-label="Left Align">
			  <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
			</button>
			<button id ="!sure" onclick="reloadPage(); return false;" type="button" class="btn btn-default" aria-label="Left Align">
			  <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
			</button>
			</center>
			
		</div>
	</div>

	<!-- hidden images here-->
	<img id="s1" class="img5" src="images/rice1.png">
	<img id="s2" class="img5" src="images/rice2.png">
	<img id="s3" class="img5" src="images/rice3.png">
	<img id="s4" class="img5" src="images/rice4.png">
	<!--end of hidden images-->
</body>
</html>

以下是整个更新的代码，正如我所说，我试图制作拖拽和拖动网站进行食品定制。

2 个答案:

答案 0 :(得分：2)

使用双重或三重=运算符进行比较，例如

if(centerbox.src == "images/rice1.png")

单=用于分配值。

function doFunction(){
    if (confirm("Are you sure with the sauce?")) {
        if(centerbox.src == "images/rice1.png") {
            window.location.href = "subpages/rice1.htm";
        }
        else if (centerbox.src == "images/rice2.png") {
            window.location.href = "subpages/rice2.htm";
        }
        else if (centerbox.src == "images/rice3.png") {
            window.location.href = "subpages/rice3.htm";    
        }
    }
}

更新：

  1. 您正在尝试访问src的{​​{1}}属性而不是div。

    2. 在img方法中新建img代码变种centerimg = document.getElementById("centerimg");。

    1. doFirst()返回图片来源的完整.src。将图像与完整路径进行比较。

      2. 这是更新后的代码段

      url
      function doFirst(){
	mypic = document.getElementById('img1');
	mypic.addEventListener("dragstart", startDrag, false);

	mypictwo = document.getElementById('img2');
	mypictwo.addEventListener("dragstart", startDrag2, false);

	mypicthree = document.getElementById('img3');
	mypicthree.addEventListener("dragstart", startDrag3, false);

	mypicfour = document.getElementById('img4');
	mypicfour.addEventListener("dragstart", startDrag4, false);

     centerbox = document.getElementById("mainbox");
     centerbox.addEventListener("dragenter", function(e) {e.preventDefault();}, false);
     centerbox.addEventListener("dragover", function(e) {e.preventDefault();}, false);
     centerbox.addEventListener("drop", dropped, false);
  
     centerimg = document.getElementById("centerimg");    //Add this
}

//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e){
	var code = '<img id="img1" src="images/rice1.png">';
	e.dataTransfer.setData('Text', code);
}
function startDrag2(e){
	var code = '<img id="img2" src="images/rice2.png">';
	e.dataTransfer.setData('Text', code);
}
function startDrag3(e){
	var code = '<img id="img2" src="images/rice3.png">';
	e.dataTransfer.setData('Text', code);
}
function startDrag4(e){
	var code = '<img id="img2" src="images/rice4.png">';
	e.dataTransfer.setData('Text', code);
}
//--------------drop FUNCTIONS -----------------------//

function dropped(e){
	e.preventDefault();
	centerbox.innerHTML = e.dataTransfer.getData('Text');	
	centerbox.getElementsByTagName("img")[0].style.width = "500px";
 	centerbox.getElementsByTagName("img")[0].style.height = "500px";
}
function drop(event){
	
}
//--------------button functions -----------------------//



function doFunction(){
    if (confirm("Are you sure with the sauce?")) {
        if(centerimg.src == "http://stacksnippets.net/images/center.png") {
            window.location.href = "subpages/rice1.htm";
        }
        else if (centerimg.src == "http://stacksnippets.net/images/center.png") {
            window.location.href = "subpages/rice2.htm";
        }
        else if (centerimg.src == "http://stacksnippets.net/images/center.png") {
            window.location.href = "subpages/rice3.htm";    
        }
    }
}


function reloadPage(){
   if (confirm("You sure want to remove sauce?")) {
   	window.location.reload();	
   	
  }
}

window.addEventListener ("load", doFirst, false);

答案 1 :(得分：1)

你的比较不正确。使用双倍或三倍相等的标记。你要为src分配值。

centerbox.src

详细了解相等标记here

在代码中

将“images / rice1.png”分配给if(centerbox.src)。然后检查if("something")。在javascript else if中评估为true，因此它永远不会转到 final TextView dSTextView = (TextView)findViewById(R.id.annoyingTextView); dSTextView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { dSTextView.getViewTreeObserver().removeOnGlobalLayoutListener(this); float lineHeight = dSTextView.getLineHeight(); int maxLines = (int) (dSTextView.getHeight() / lineHeight); if (dSTextView.getLineCount() != maxLines) { dSTextView.setLines(maxLines); } } }); 块。

相关问题
最新问题