如果语句出现问题,则拖放Javascript

安吉拉

我目前正在使用HTML的拖放功能来开发JavaScript游戏。我在这里要做的是允许将随机生成的水果图像拖放到果冻图像上。然后,如果拖动的图像符合条件集(当数字图像数组索引== x,而水果图像索引为== y时),则将其放下。为了声明这个if语句,我从背景图片中获取值。(如果number的背景图像是x,而水果的背景图像是y)在我尝试为其设置条件之前,我的代码执行得很好。从逻辑上讲,我不明白为什么在有if语句的情况下它不起作用,甚至不显示图像。

编辑:尝试使用===代替=,仍然没有响应

编辑:按照注释删除分号后,其余代码执行正常。但是拖放不会响应。

编辑:图像url的声明变量,而不是直接在放置函数中使用url。拖放仍然无效。

var myNumber = new Array(9);

myNumber[0] = '1.png';
myNumber[1] = '2.png';
myNumber[2] = '3.png';
myNumber[3] = '4.png';
myNumber[4] = '5.png';
myNumber[5] = '6.png';
myNumber[6] = '7.png';
myNumber[7] = '8.png';
myNumber[8] = '9.png';

var numberImage1 =  "url(" + numberAddress + myNumber[0] + ")";
var numberImage2 =  "url(" + numberAddress + myNumber[1] + ")";
var numberImage3 =  "url(" + numberAddress + myNumber[2] + ")";
var numberImage4 =  "url(" + numberAddress + myNumber[3] + ")";
var numberImage5 =  "url(" + numberAddress + myNumber[4] + ")";
var numberImage6 =  "url(" + numberAddress + myNumber[5] + ")";
var numberImage7 =  "url(" + numberAddress + myNumber[6] + ")";
var numberImage8 =  "url(" + numberAddress + myNumber[7] + ")";
var numberImage9 =  "url(" + numberAddress + myNumber[8] + ")";



var fruitCloudOne = new Array(15);

fruitCloudOne[0] = '3apple.png';
fruitCloudOne[1] = '3banana.png';
fruitCloudOne[2] = '3blueberry.png';
fruitCloudOne[3] = '3plum.png';
fruitCloudOne[4] = '3strawberry.png';

fruitCloudOne[5] = '5apple.png';
fruitCloudOne[6] = '5banana.png';
fruitCloudOne[7] = '5blueberry.png';
fruitCloudOne[8] = '5plum.png';
fruitCloudOne[9] = '5strawberry.png';

fruitCloudOne[10] = '8apple.png';
fruitCloudOne[11] = '8banana.png';
fruitCloudOne[12] = '8blueberry.png';
fruitCloudOne[13] = '8plum.png';
fruitCloudOne[14] = '8strawberry.png';

var apple3 = "url(" + fruit1Address + fruitCloudOne[0] + ")";
var banana3 = "url(" + fruit1Address + fruitCloudOne[1] + ")";
var blueberry3 = "url(" + fruit1Address + fruitCloudOne[2] + ")";
var plum3 = "url(" + fruit1Address + fruitCloudOne[3] + ")";
var strawberry3 = "url(" + fruit1Address + fruitCloudOne[4] + ")";

var apple5 = "url(" + fruit1Address + fruitCloudOne[5] + ")";
var banana5 = "url(" + fruit1Address + fruitCloudOne[6] + ")";
var blueberry5 = "url(" + fruit1Address + fruitCloudOne[7] + ")";
var plum5 = "url(" + fruit1Address + fruitCloudOne[8] + ")";
var strawberry5 = "url(" + fruit1Address + fruitCloudOne[9] + ")";

var apple8 = "url(" + fruit1Address + fruitCloudOne[10] + ")";
var banana8 = "url(" + fruit1Address + fruitCloudOne[11] + ")";
var blueberry8 = "url(" + fruit1Address + fruitCloudOne[12] + ")";
var plum8 = "url(" + fruit1Address + fruitCloudOne[13] + ")";
var strawberry8 = "url(" + fruit1Address + fruitCloudOne[14] + ")";



var fruitCloudTwo = new Array(15);

fruitCloudTwo[0] = '1apple.png';
fruitCloudTwo[1] = '1banana.png';
fruitCloudTwo[2] = '1blueberry.png';
fruitCloudTwo[3] = '1plum.png';
fruitCloudTwo[4] = '1strawberry.png';

fruitCloudTwo[5] = '2apple.png';
fruitCloudTwo[6] = '2banana.png';
fruitCloudTwo[7] = '2blueberry.png';
fruitCloudTwo[8] = '2plum.png';
fruitCloudTwo[9] = '2strawberry.png';

fruitCloudTwo[10] = '4apple.png';
fruitCloudTwo[11] = '4banana.png';
fruitCloudTwo[12] = '4blueberry.png';
fruitCloudTwo[13] = '4plum.png';
fruitCloudTwo[14] = '4strawberry.png';

var apple1 = "url(" + fruit2Address + fruitCloudTwo[0] + ")";
var banana1 = "url(" + fruit2Address + fruitCloudTwo[1] + ")";
var blueberry1 = "url(" + fruit2Address + fruitCloudTwo[2] + ")";
var plum1 = "url(" + fruit2Address + fruitCloudTwo[3] + ")";
var strawberry1 = "url(" + fruit2Address + fruitCloudTwo[4] + ")";

var apple2 = "url(" + fruit2Address + fruitCloudTwo[5] + ")";
var banana2 = "url(" + fruit2Address + fruitCloudTwo[6] + ")";
var blueberry2 = "url(" + fruit2Address + fruitCloudTwo[7] + ")";
var plum2 = "url(" + fruit2Address + fruitCloudTwo[8] + ")";
var strawberry2 = "url(" + fruit2Address + fruitCloudTwo[9] + ")";

var apple4 = "url(" + fruit2Address + fruitCloudTwo[10] + ")";
var banana4 = "url(" + fruit2Address + fruitCloudTwo[11] + ")";
var blueberry4 = "url(" + fruit2Address + fruitCloudTwo[12] + ")";
var plum4 = "url(" + fruit2Address + fruitCloudTwo[13] + ")";
var strawberry4 = "url(" + fruit2Address + fruitCloudTwo[14] + ")";



var fruitCloudThree = new Array(15);

fruitCloudThree[0] = '6apple.png';
fruitCloudThree[1] = '6banana.png';
fruitCloudThree[2] = '6blueberry.png';
fruitCloudThree[3] = '6plum.png';
fruitCloudThree[4] = '6strawberry.png';

fruitCloudThree[5] = '7apple.png';
fruitCloudThree[6] = '7banana.png';
fruitCloudThree[7] = '7blueberry.png';
fruitCloudThree[8] = '7plum.png';
fruitCloudThree[9] = '7strawberry.png';

fruitCloudThree[10] = '9apple.png';
fruitCloudThree[11] = '9banana.png';
fruitCloudThree[12] = '9blueberry.png';
fruitCloudThree[13] = '9plum.png';
fruitCloudThree[14] = '9strawberry.png';

var apple6 = "url(" + fruit3Address + fruitCloudThree[0] + ")";
var banana6 = "url(" + fruit3Address + fruitCloudThree[1] + ")";
var blueberry6 = "url(" + fruit3Address + fruitCloudThree[2] + ")";
var plum6 = "url(" + fruit3Address + fruitCloudThree[3] + ")";
var strawberry6 = "url(" + fruit3Address + fruitCloudThree[4] + ")";

var apple7 = "url(" + fruit3Address + fruitCloudThree[5] + ")";
var banana7 = "url(" + fruit3Address + fruitCloudThree[6] + ")";
var blueberry7 = "url(" + fruit3Address + fruitCloudThree[7] + ")";
var plum7 = "url(" + fruit3Address + fruitCloudThree[8] + ")";
var strawberry7 = "url(" + fruit3Address + fruitCloudThree[9] + ")";

var apple9 = "url(" + fruit3Address + fruitCloudThree[10] + ")";
var banana9 = "url(" + fruit3Address + fruitCloudThree[11] + ")";
var blueberry9 = "url(" + fruit3Address + fruitCloudThree[12] + ")";
var plum9 = "url(" + fruit3Address + fruitCloudThree[13] + ")";
var strawberry9 = "url(" + fruit3Address + fruitCloudThree[14] + ")";



//random generation of number and fruits & display
var numberAddress = 'Assets/Numbers/';

var fruit1Address = 'Assets/FruitCloud1/';
var randFruit1 = Math.floor(Math.random() * (fruitCloudOne.length));
var randFruit1Image = "url(" + fruit1Address + fruitCloudOne[randFruit1] + ")";

var fruit2Address = 'Assets/FruitCloud2/';
var randFruit2 = Math.floor(Math.random() * (fruitCloudTwo.length));
var randFruit2Image = "url(" + fruit2Address + fruitCloudTwo[randFruit2] + ")";

var fruit3Address = 'Assets/FruitCloud3/';
var randFruit3 = Math.floor(Math.random() * (fruitCloudThree.length));
var randFruit3Image = "url(" + fruit3Address + fruitCloudThree[randFruit3] + ")";

//refresh fruit images
function refreshFruits() {
    var fruit1Address = 'Assets/FruitCloud1/';
    var randFruit1 = Math.floor(Math.random() * (fruitCloudOne.length));
    var randFruit1Image = "url(" + fruit1Address + fruitCloudOne[randFruit1] + ")";
    document.getElementById("fruit1").style.backgroundImage = randFruit1Image;

    var fruit2Address = 'Assets/FruitCloud2/';
    var randFruit2 = Math.floor(Math.random() * (fruitCloudTwo.length));
    var randFruit2Image = "url(" + fruit2Address + fruitCloudTwo[randFruit2] + ")";
    document.getElementById("fruit2").style.backgroundImage = randFruit2Image;

    var fruit3Address = 'Assets/FruitCloud3/';
    var randFruit3 = Math.floor(Math.random() * (fruitCloudThree.length));
    var randFruit3Image = "url(" + fruit3Address + fruitCloudThree[randFruit3] + ")";
    document.getElementById("fruit3").style.backgroundImage = randFruit3Image;
}

//display number and three fruit images
function startGame() {
    var numberImage1 =  "url(" + numberAddress + myNumber[0] + ")";
    document.getElementById("number").style.backgroundImage = numberImage1;

    document.getElementById("fruit1").style.backgroundImage = randFruit1Image;

    document.getElementById("fruit2").style.backgroundImage = randFruit2Image;

    document.getElementById("fruit3").style.backgroundImage = randFruit3Image;
}


    
function dragOver(ev) {
    ev.preventDefault();
}

function dragStart(ev) {
    ev.dataTransfer.setData("fruit", ev.target.id);
}

function onDrop(ev) {
    var numberImage1 =  "url(" + numberAddress + myNumber[0] + ")";
    var apple1 = "url(" + fruit2Address + fruitCloudTwo[0] + ")";
    var banana1 = "url(" + fruit2Address + fruitCloudTwo[1] + ")";
    var blueberry1 = "url(" + fruit2Address + fruitCloudTwo[2] + ")";
    var plum1 = "url(" + fruit2Address + fruitCloudTwo[3] + ")";
    var strawberry1 = "url(" + fruit2Address + fruitCloudTwo[4] + ")";
    
    ev.preventDefault();
    if (document.getElementById("number").style.backgroundImage == numberImage1 && document.getElementById("fruit2").style.backgroundImage == apple1) {
        var data = ev.dataTransfer.getData("fruit");
        ev.target.appendChild(document.getElementById(data));
    }
    
    if (document.getElementById("number").style.backgroundImage == numberImage1 && document.getElementById("fruit2").style.backgroundImage == banana1) {
        var data = ev.dataTransfer.getData("fruit");
        ev.target.appendChild(document.getElementById(data));
    }
    
    if (document.getElementById("number").style.backgroundImage == numberImage1 && document.getElementById("fruit2").style.backgroundImage == blueberry1) {
        var data = ev.dataTransfer.getData("fruit");
        ev.target.appendChild(document.getElementById(data));
    }
    
    if (document.getElementById("number").style.backgroundImage == numberImage1 && document.getElementById("fruit2").style.backgroundImage == plum1) {
        var data = ev.dataTransfer.getData("fruit");
        ev.target.appendChild(document.getElementById(data));
    }
    
    if (document.getElementById("number").style.backgroundImage == numberImage1 && document.getElementById("fruit2").style.backgroundImage == strawberry1) {
        var data = ev.dataTransfer.getData("fruit");
        ev.target.appendChild(document.getElementById(data));
    }
}
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    background-color: black;
}

#background {
    position: absolute;
    background-image: url(Assets/Background_cloudPosition.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    bottom: 0%;
    z-index: -10;
}

#startGame {
    position: absolute;
    left: 90px;
    width: 80px;
    height: 80px;
    background-color: green;
}

#refreshFruits {
    position: absolute;
    left: 180px;
    width: 80px;
    height: 80px;
    background-color: blue;
}

#number {
    position: absolute;
    width: 230px;
    height: 230px;
    left: 450px;
    bottom: 415px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 15;
}

#fruitCloud1 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 460px;
    left: 135px;
    z-index: 15;
}

#fruitCloud2 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 320px;
    left: 300px;
    z-index: 15;
}

#fruitCloud3 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 185px;
    left: 110px;
    z-index: 15;
}

#fruit1 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
}

#fruit2 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
}

#fruit3 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
}

#jelly {
    position: absolute;
    background-image: url(Assets/JellyMonster/JellyMonsterDefault.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 260px;
    height: 190px;
    bottom: 50px;
    right: 390px;
    z-index: 10;
}
<!DOCTYPE html>

<html>
    
<head>
    
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <script type="text/javascript" src="script.js"></script>
    <title>This is an experiment.</title>
    
</head>
    
<body>
<!--- 
<a id="download" href="index.html"></a>--->
    
<button id="startGame" onclick="startGame()"></button>
<button id="refreshFruits" onclick="refreshFruits()"></button>

<div id="number"></div>
    
<div id="jelly" ondrop="onDrop(event)" ondragover="dragOver(event)"></div>

<div class="fruit" id="fruitCloud1">
    <div id="fruit1" draggable="true" ondragstart="dragStart(event)"></div>
</div>

<div class="fruit" id="fruitCloud2">
    <div id="fruit2" draggable="true" ondragstart="dragStart(event)"></div>
</div>
    
<div class="fruit" id="fruitCloud3">
    <div id="fruit3" draggable="true" ondragstart="dragStart(event)"></div>
</div>
    
</body>
    
</html>

英雄零

因此,使此代码起作用。

我稍微修改了if语句,结果发现其中存在类型错误。我添加了一些控制台日志语句,以便您可以看到输出。当条件匹配时,拖放操作是有效的,由于是随机生成的,因此在测试以获取拖放时,有时不得不刷新屏幕很多。这个概念很酷,开箱即用,但可能需要进行一些重构以帮助最小化代码并提高可读性。查看示例时,您将需要全屏显示该示例,因为它将此处的所有内容压缩在一起...

希望这可以帮助

var myNumber = new Array(9);

myNumber[0] = '1.png';
myNumber[1] = '2.png';
myNumber[2] = '3.png';
myNumber[3] = '4.png';
myNumber[4] = '5.png';
myNumber[5] = '6.png';
myNumber[6] = '7.png';
myNumber[7] = '8.png';
myNumber[8] = '9.png';


var fruitCloudOne = new Array(15);

fruitCloudOne[0] = '3apple.png';
fruitCloudOne[1] = '3banana.png';
fruitCloudOne[2] = '3blueberry.png';
fruitCloudOne[3] = '3plum.png';
fruitCloudOne[4] = '3strawberry.png';
fruitCloudOne[5] = '5apple.png';
fruitCloudOne[6] = '5banana.png';
fruitCloudOne[7] = '5blueberry.png';
fruitCloudOne[8] = '5plum.png';
fruitCloudOne[9] = '5strawberry.png';
fruitCloudOne[10] = '8apple.png';
fruitCloudOne[11] = '8banana.png';
fruitCloudOne[12] = '8blueberry.png';
fruitCloudOne[13] = '8plum.png';
fruitCloudOne[14] = '8strawberry.png';


var fruitCloudTwo = new Array(15);

fruitCloudTwo[0] = '1apple.png';
fruitCloudTwo[1] = '1banana.png';
fruitCloudTwo[2] = '1blueberry.png';
fruitCloudTwo[3] = '1plum.png';
fruitCloudTwo[4] = '1strawberry.png';
fruitCloudTwo[5] = '2apple.png';
fruitCloudTwo[6] = '2banana.png';
fruitCloudTwo[7] = '2blueberry.png';
fruitCloudTwo[8] = '2plum.png';
fruitCloudTwo[9] = '2strawberry.png';
fruitCloudTwo[10] = '4apple.png';
fruitCloudTwo[11] = '4banana.png';
fruitCloudTwo[12] = '4blueberry.png';
fruitCloudTwo[13] = '4plum.png';
fruitCloudTwo[14] = '4strawberry.png';


var fruitCloudThree = new Array(15);

fruitCloudThree[0] = '6apple.png';
fruitCloudThree[1] = '6banana.png';
fruitCloudThree[2] = '6blueberry.png';
fruitCloudThree[3] = '6plum.png';
fruitCloudThree[4] = '6strawberry.png';
fruitCloudThree[5] = '7apple.png';
fruitCloudThree[6] = '7banana.png';
fruitCloudThree[7] = '7blueberry.png';
fruitCloudThree[8] = '7plum.png';
fruitCloudThree[9] = '7strawberry.png';
fruitCloudThree[10] = '9apple.png';
fruitCloudThree[11] = '9banana.png';
fruitCloudThree[12] = '9blueberry.png';
fruitCloudThree[13] = '9plum.png';
fruitCloudThree[14] = '9strawberry.png';


//random generation of number and fruits & display

var numberAddress = 'Assets/Numbers/';
var numberIndex = 0;
var fruitOneIndex = 0;
var fruitTwoIndex = 0;
var fruitThreeIndex = 0;

var fruit1Address = 'Assets/FruitCloud1/';
var randFruit1 = Math.floor(Math.random() * (fruitCloudOne.length));

var fruit2Address = 'Assets/FruitCloud2/';
var randFruit2 = Math.floor(Math.random() * (fruitCloudTwo.length));

var fruit3Address = 'Assets/FruitCloud3/';
var randFruit3 = Math.floor(Math.random() * (fruitCloudThree.length));


function refreshFruits() {
  var fruit1Address = 'Assets/FruitCloud1/';
  var randFruit1 = Math.floor(Math.random() * (fruitCloudOne.length));
  document.getElementById("fruit1").style.backgroundImage = "url(" + fruit1Address + fruitCloudOne[randFruit1] + ")";

  var fruit2Address = 'Assets/FruitCloud2/';
  var randFruit2 = Math.floor(Math.random() * (fruitCloudTwo.length));
  document.getElementById("fruit2").style.backgroundImage = "url(" + fruit2Address + fruitCloudTwo[randFruit2] + ")";

  var fruit3Address = 'Assets/FruitCloud3/';
  var randFruit3 = Math.floor(Math.random() * (fruitCloudThree.length));
  document.getElementById("fruit3").style.backgroundImage = "url(" + fruit3Address + fruitCloudThree[randFruit3] + ")";
}


function startGame() {
  document.getElementById("number").style.backgroundImage = "url(" + numberAddress + myNumber[numberIndex] + ")";

  document.getElementById("fruit1").style.backgroundImage = "url(" + fruit1Address + fruitCloudOne[randFruit1] + ")";

  document.getElementById("fruit2").style.backgroundImage = "url(" + fruit2Address + fruitCloudTwo[randFruit2] + ")";

  document.getElementById("fruit3").style.backgroundImage = "url(" + fruit3Address + fruitCloudThree[randFruit3] + ")";
}



function dragOver(ev) {
  ev.preventDefault();
}

function dragStart(ev) {
  ev.dataTransfer.setData("fruit", ev.target.id);
}

//PROBLEM ARISE HERE
function onDrop(ev) {
  ev.preventDefault();
  console.log(document.getElementById("number").style.backgroundImage);
  console.log("What we are expecting to see " + document.getElementById("fruit2").style.backgroundImage );
  console.log("What we are getting " + 'url("' + fruit2Address + fruitCloudTwo[fruitTwoIndex] + '")');
  
  if (document.getElementById("number").style.backgroundImage == 'url("' + numberAddress + myNumber[numberIndex] +'")' && document.getElementById("fruit2").style.backgroundImage == 'url("' + fruit2Address + fruitCloudTwo[fruitTwoIndex] + '")') {
    var data = ev.dataTransfer.getData("fruit");
    ev.target.appendChild(document.getElementById(data));
    console.log('finally got one');
  }else{
    console.log('Try Again');
  }
}
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    background-color: black;
  }
  
  #background {
    position: absolute;
    background-image: url(Assets/Background_cloudPosition.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    bottom: 0%;
    z-index: -10;
  }
  
  #number {
    position: absolute;
    width: 230px;
    height: 230px;
    left: 450px;
    bottom: 415px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 15;
  }
  
  #fruitCloud1 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 460px;
    left: 135px;
    z-index: 15;
  }
  
  #fruitCloud2 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 320px;
    left: 300px;
    z-index: 15;
  }
  
  #fruitCloud3 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 185px;
    left: 110px;
    z-index: 15;
  }
  
  #fruit1 {
    position: absolute;
    top: 0px;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rosybrown;
  }
  
  #fruit2 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: aqua;
  }
  
  #fruit3 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
  }
  
  #jelly {
    position: absolute;
    background-image: url(Assets/JellyMonster/JellyMonsterDefault.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 260px;
    height: 190px;
    bottom: 50px;
    right: 390px;
    z-index: 10;
    background-color: white;
  }
  
  #startGame {
    width: 80px;
    height: 80px;
    background-color: green;
  }
  
  #refreshFruits {
    width: 80px;
    height: 80px;
    background-color: blue;
  }
  
  
<html>

<head>

  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <script type="text/javascript" src="script.js"></script>
  <title>This is an experiment.</title>

</head>

<body>

  <button id="startGame" onclick="startGame()">Start</button>
  <button id="refreshFruits" onclick="refreshFruits()">Refresh</button>

  <div id="number"></div>

  <div id="jelly" ondrop="onDrop(event)" ondragover="dragOver(event)">Jelly</div>

  <div class="fruit" id="fruitCloud1">
    <div id="fruit1" draggable="true" ondragstart="dragStart(event)">Fruit 1</div>
  </div>

  <div class="fruit" id="fruitCloud2">
    <div id="fruit2" draggable="true" ondragstart="dragStart(event)">Fruit 2</div>
  </div>

  <div class="fruit" id="fruitCloud3">
    <div id="fruit3" draggable="true" ondragstart="dragStart(event)">Fruit 3</div>
  </div>

</body>

<html>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章