英文:
JQuery: One function between two sites. How to do?
问题
I can help you with the JavaScript code to achieve this functionality. You can use JavaScript's window.open() method to open a new window with the content of example_1.html when clicking on the buttons in example_2.html. Here's the JavaScript code to do that:
<!-- example_2.html -->
<button id="button1">button1</button>
<button id="button2">button2</button>
<button id="button3">button3</button>
<script>
// Add click event listeners to the buttons
document.getElementById("button1").addEventListener("click", function() {
openExample1Window(1);
});
document.getElementById("button2").addEventListener("click", function() {
openExample1Window(2);
});
document.getElementById("button3").addEventListener("click", function() {
openExample1Window(3);
});
// Function to open example_1.html with the corresponding item clicked
function openExample1Window(itemNumber) {
// Define the URL of example_1.html
var example1Url = "example_1.html";
// Open a new window with example_1.html
var newWindow = window.open(example1Url);
// Wait for the new window to load
newWindow.addEventListener("load", function() {
// Trigger a click event on the corresponding Linkitem based on itemNumber
var linkItemId = "Linkitem" + itemNumber;
var linkItem = newWindow.document.getElementById(linkItemId);
if (linkItem) {
linkItem.click();
}
});
}
</script>
You can add this JavaScript code to your example_2.html file. When you click on button1, button2, or button3, it will open a new window with example_1.html and simulate a click on the corresponding Linkitem1, Linkitem2, or Linkitem3 element, respectively. This should achieve the desired behavior you mentioned.
英文:
I have a question. my example_1.html looks like this:
> <main role="main"> <div class="container">
> <div class="card">
> <div class="card-header">
> <ul class="nav">
> <li class="nav-item">
> <a id="Linkitem1" class="Linkitem" href="#" role="button" title="">item1</a>
> </li>
> <li class="nav-item">
> <a id="Linkitem2" class="Linkitem" href="#" role="button" title="">item2</a>
> </li>
> <li class="nav-item">
> <a id="Linkitem3" class="Linkitem" href="#" role="button" title="">item3</a>
> </li>
> </ul>
> </div>
>
> <!--Content item1-->
> <div id="item1" class="item card-body" data-parent="#card-content">
> <h5 class="card-title">title for item 1</h5>
> <p class="card-text">content item 1.</p>
> </div>
>
> <!--content item 2-->
> <div id="item2" class="item card-body" data-parent="#card-content">
> <h5 class="card-title">title item 2</h5>
> <p class="card-text">content item 2</p> </div>
> <!--content 3-->
> <div id="item3" class="item card-body" data-parent="#card-content">
> <h5 class="card-title">title item 3</h5>
> <p class="card-text">content item 3</p>
> </div>
> </div> </main>
And script.js is looking like this:
> $(".Linkitem").click(function(){ event.preventDefault(); let
> dataId = $(this).attr('data-id');
> $('.item[data-id='+dataId+']').fadeIn(2500);
> $('.item:not([data-id='+dataId+'])').hide();
> $('.Linkitem[data-id='+dataId+']').addClass("active btn-warning");
> $('.Linkitem:not([data-id='+dataId+'])').removeClass("active
> btn-warning");
> });
Now I would like to combine example_1.html with my example_2.html, which has this content:
<button><a href="">button1</a></button>
<button><a href="">button2</a></button>
<button><a href="">button3</a></button>
And would like to follow thing:
If I have clicked on example_2.html on the button1, then it has to open a new window(example_1.html and its like, I have clicked on "Linkitem1".
Then button2, like I have clicked on Linkitem2 and button3 like Linkitem3.
Am a beginner and therefore I need help. How should to write javascript code to do this? Someone who can help?
答案1
得分: 0
当在打开新窗口时，您可以在链接中传递一些参数。
因此，当您的 example_2.html 看起来像这样（target="blank" 打开新窗口，但我认为您已经知道）
<a href="example_1.html#Linkitem1" target="blank">button1</a>
<a href="example_1.html#Linkitem2" target="blank">button2</a>
<a href="example_1.html#Linkitem3" target="blank">button3</a>
假设您为 example_1.html 附加了 JavaScript，您可以像这样读取它
if (window.location.hash == '#Linkitem1') {
// 对 Linkitem1 做一些操作
}
else if (window.location.hash == '#Linkitem2') {
// 对 Linkitem2 做一些操作
}
// ...
当然，有一种更通用的方法，但我只想提供一个思路。
英文:
You can pass some parameter in link when opening new window.
So when your example_2.html would look like this ( target="_blank" opens new window but I think you have already know that)
<a href="example_1.html#Linkitem1" target="_blank">button1</a>
<a href="example_1.html#Linkitem2" target="_blank">button2</a>
<a href="example_1.html#Linkitem3" target="_blank">button3</a>
Assuming you attach js for example_1.html you can then read it like that
if(window.location.hash == '#Linkitem1'){
// do something with linkitem1
}
else if (window.location.hash == '#Linkitem2`){
// do smth with linkitem2
}
...
of course there is a way to make it more generic but I want to give only the idea.
答案2
得分: 0
你必须先添加 data-id 标签，才能运行你的脚本。
$('.item[data-id=' + dataId + ']')
英文:
you have to add data-id tag first in order to run you script
$('.item[data-id='+dataId+']')
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论