英文:
How to select the active slide and a table element using JS React?
问题
Here's the translated part of your text:
我是一个网页开发的初学者。作为一项练习的一部分，我想修改下面链接的javascript代码。
我想要使按钮元素可点击。
`https://codepen.io/hexagoncircle/pen/jgGxKR?editors=0010`
const slide1Button = document.querySelector('.btn');
slide1Button.addEventListener('click', function() {
window.open(slideData[0].url);
});
const slide2Button = document.querySelector('.btn');
slide2Button.addEventListener('click', function() {
window.open(slideData[1].url);
});
const slideData = [
{
index: 0,
button: 'VISITER',
url: 'https://www.interflora.fr/',
src: 'https://lecoqetlecerisier.files.wordpress.com/2011/05/dsc037411.jpg'
},
{
index: 1,
button: 'VISITER',
url: 'https://www.123fleurs.com/',
src: 'http://idata.over-blog.com/1/39/34/32/Poitiers-Ici-et-La/Macro-fleur-rose.JPG'
},
{
index: 2,
button: 'VISITER',
url: 'https://www.aquarelle.com/',
src: 'http://monmondevirtuel.m.o.pic.centerblog.net/o/91d323e8.jpg'
},
{
index: 3,
button: 'VISITER',
url: 'https://www.florajet.com/',
src: 'http://www.juille.com/images/006_3.JPG'
}
];
我已经添加了这段代码。
它部分工作，因为我无法确定为当前幻灯片选择按钮，并在单击时根据slideData表中的URL重定向。
这仅选择表中的第一个URL，我希望使元素具有交互性，并使其跟随当前幻灯片。
如果有人可以帮助我或建议我的方法。
Is there anything else you would like to know or do with this text?
英文:
I am a beginner in web development. As part of an exercise I would like to modify the javascript code of the link below.
I would like to make the button elements clickable.
https://codepen.io/hexagoncircle/pen/jgGxKR?editors=0010
const slide1Button = document.querySelector('.btn');
slide1Button.addEventListener('click', function() {
window.open(slideData[0].url);
});
const slide2Button = document.querySelector('.btn');
slide2Button.addEventListener('click', function() {
window.open(slideData[1].url);
});
const slideData = [
{
index: 0,
button: 'VISITER',
url: 'https://www.interflora.fr/',
src: 'https://lecoqetlecerisier.files.wordpress.com/2011/05/dsc037411.jpg' },
{
index: 1,
button: 'VISITER',
url: 'https://www.123fleurs.com/',
src: 'http://idata.over-blog.com/1/39/34/32/Poitiers-Ici-et-La/Macro-fleur-rose.JPG' },
{
index: 2,
button: 'VISITER',
url: 'https://www.aquarelle.com/',
src: 'http://monmondevirtuel.m.o.pic.centerblog.net/o/91d323e8.jpg' },
{
index: 3,
button: 'VISITER',
url: 'https://www.florajet.com/',
src: 'http://www.juille.com/images/006_3.JPG' }
];
I have added the code
It works halfway, because I can't determine that for slide current it selects the button and on click redirects according to the url written in the slideData table.
this only selects the first url of the table i want to make the element interactive and have it follow the current slide.
If anyone can help me or advise me in my approach.
答案1
得分: 0
以下是翻译好的部分：
Slide Component -> render()
<button className="slide__action btn" onClick={() => window.open(url, '_blank')}>{button}</button>
Don't forget to import url prop into the Slide Component
const { src, button, headline, index, url } = this.props.slide
Here is a working example : CodePen.
英文:
You can add an onClick event on the button in the Slide component itself.
Slide Component -> render()
<button className="slide__action btn" onClick={() => window.open(url, '_blank')}>{button}</button>
Don't forget to import url prop into the Slide Component
const { src, button, headline, index, url } = this.props.slide
Here is a working example : CodePen.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论