使用Jquery“查找”显示图像 [英] Display image using Jquery "find"
本文介绍了使用Jquery“查找”显示图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图用jquery显示图像。我有一个ID& PATH作为参数.ID指示部分（每个部分是在用户操作中加载的HTML页面），还有一个文本区域，我在其中显示文本文件内容。现在以同样的方式，我想要显示图像，我尝试了不同的方法，但没有成功。以下是我的Java Script文件& HTML文件
HTML文件：
< html>
< body>
< div id =tab1name =tabstyle =cursor：pointer; cursor：hand; width：90px; float：left; height：22px; margin-top：0px;
background-color：lightgrey; font-size：13px; text-align：center; border-bottom：none; display：table-cell;的onClick = 翼片（1） >
< div style =margin-top：3px> TAB1< / div>
< / div>
< div id =tab2name =tabstyle =cursor：pointer; cursor：hand; width：90px; background-color：lightgrey; float：left; height：20px; margin-top： 2px; font-size：12px; text-align：centeronClick =tabs（2）>
< div style =margin-top：3px> TAB2< / div>
< / div>
< div style =width：auto; height：22px; border-bottom-color：white; border-bottom-style：solid; border-bottom-width：1px>< / div>
< div name =tab_contentstyle =display：block; margin-left：20px; >
< br>< / br>
< br>< / br>
< div id =legendReport>
注1：
< / div>
< br>< / br>
< br>< / br>
< div id =legendRough>
注2：
< / div>
< textarea id =roughNotes_textAreaname =textArea2rows =4cols =50>< / textarea>
< / div>
< div name =tab_contentclass =tab_contentstyle =display：none; margin-left：20px;>
< br>< / br>
< br>< / br>
< textarea name =textArea3rows =4cols =50>< / textarea>
< br>< / br>
< br>< / br>
< textarea name =textArea4rows =4cols =50>< / textarea>
< br>< / br>
< br>< / br>
< br>< / br>
< br>< / br>
<！ - 所选分析的示意图点 - >
< img id =myImagesrc =style =width：304px; height：228px;>< / img>
< / div>
< / body>
< / html>
JavaScript文件：
//显示文本区域中的文件内容
function displayTextfileData（textFilePath，ID）{
readTextFile（textFilePath）;
alert（textFileContent）;
var sectionDIV =#section+ ID;
alert（sectionDIV）
$（sectionDIV）.find（[name = textArea3]）。val（textFileContent）;
$（sectionDIV）.find（[name = textArea4]）。val（textFileContent）;
}
//此函数显示图像
函数displayImage（imageFilePath，ID）{
var sectionDIV =#section+ ID;
alert（displayImageforDropdown（）：+ imageFilePath）;
//$（sectionDIV ).find（\"myImage\"）.src = imageFilePath;
$（sectionDIV）.getElementById（myImage）。src = imageFilePath;
//document.getElementById(\"myImage\").src = imageFilePath
// alert（displayImageforDropdown（）：Assigned result：+（document.getElementByName（displayImage）。src = imageFilePath） ）;
}
显示文本文件内容工作正常，但是我希望图像
解决方案替换
$（sectionDIV） .getElementById（myImage）.src = imageFilePath;
with
$（sectionDIV）.find（img＃myImage）。attr（src，imageFilePath）;;
I am trying to display an image using jquery.I have a function which has ID & PATH as a parameter.The ID indicates the section(Each section is a html page which gets loaded on user action),Also there is a text area where I am displaying the text file content.Now in a same way i want to display image ,I tried different methods but it didn't work out.Below is my Java Script file & HTML file
HTML File:
<html>
<body>
<div id="tab1" name="tab" style="cursor: pointer; cursor: hand; width:90px;float: left;height: 22px ; margin-top: 0px;
background-color:lightgrey;font-size: 13px;text-align: center;border-bottom: none;display: table-cell;" onClick="tabs(1)">
<div style="margin-top: 3px" >TAB1</div>
</div>
<div id="tab2" name="tab" style="cursor: pointer; cursor: hand; width:90px;background-color:lightgrey;float: left;height: 20px; margin-top: 2px; font-size: 12px;text-align: center" onClick="tabs(2)">
<div style="margin-top: 3px">TAB2</div>
</div>
<div style="width:auto;height: 22px; border-bottom-color: white;border-bottom-style: solid;border-bottom-width: 1px"></div>
<div name="tab_content" style="display: block; margin-left:20px;" >
<br></br>
<br></br>
<div id="legendReport">
Notes 1:
</div>
<textarea name="textArea1" rows="4" value="" cols="50"></textarea>
<br></br>
<br></br>
<div id="legendRough">
Notes 2:
</div>
<textarea id="roughNotes_textArea" name="textArea2" rows="4" cols="50"></textarea>
</div>
<div name="tab_content" class="tab_content" style="display: none;margin-left:20px;">
<br></br>
<br></br>
<textarea name="textArea3" rows="4" cols="50" ></textarea>
<br></br>
<br></br>
<textarea name="textArea4" rows="4" cols="50"></textarea>
<br></br>
<br></br>
<br></br>
<br></br>
<!-- Schematic of selected analysis Point -->
<img id="myImage" src="" style="width:304px;height:228px;"></img>
</div>
</body>
</html>
JavaScript File:
//Displays the file content in text area
function displayTextfileData(textFilePath,ID){
readTextFile(textFilePath);
alert(textFileContent);
var sectionDIV = "#section" + ID;
alert(sectionDIV)
$(sectionDIV).find("[name=textArea3]").val(textFileContent);
$(sectionDIV).find("[name=textArea4]").val(textFileContent);
}
//This function display the image
function displayImage(imageFilePath,ID){
var sectionDIV = "#section" + ID;
alert("displayImageforDropdown():"+imageFilePath);
//$(sectionDIV).find("myImage").src = imageFilePath;
$(sectionDIV).getElementById("myImage").src = imageFilePath;
//document.getElementById("myImage").src = imageFilePath
//alert("displayImageforDropdown(): Assigned result: "+(document.getElementByName("displayImage").src = imageFilePath));
}
Display text file content is working fine,But i want the same on Image
解决方案
Replace
$(sectionDIV).getElementById("myImage").src = imageFilePath;
with
$(sectionDIV).find("img#myImage").attr("src", imageFilePath);;
这篇关于使用Jquery“查找”显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
