Javascript 以前通过jQuery/JSON创建的单独链接在单击时工作良好，现在只有一个按钮工作，而其他按钮不可单击_Javascript_Html_Jquery_Css

Javascript 以前通过jQuery/JSON创建的单独链接在单击时工作良好，现在只有一个按钮工作，而其他按钮不可单击

javascript html jquery css

Javascript 以前通过jQuery/JSON创建的单独链接在单击时工作良好，现在只有一个按钮工作，而其他按钮不可单击,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我遇到了一个问题，除了最后一个正常工作的链接外，所有指向代码笔的单独链接在点击按钮时都停止触发。有人知道这是什么原因吗？是实时站点所在的位置，还包括我的代码我尝试将.attr（'href'，project.url）移动到第二个标记，移除按钮并将其替换为刚刚尝试在.attr（'href'，project.url）上加倍添加到第二个标记，但都没有用。我不确定这是否是CSS样式造成的问题 JAVASCRIPT/jQuery代码 // all application logic is include

我遇到了一个问题，除了最后一个正常工作的链接外，所有指向代码笔的单独链接在点击按钮时都停止触发。有人知道这是什么原因吗？是实时站点所在的位置，还包括我的代码

我尝试将

.attr（'href'，project.url）

移动到第二个标记，移除按钮并将其替换为刚刚尝试在

.attr（'href'，project.url）

上加倍添加到第二个标记，但都没有用。我不确定这是否是CSS样式造成的问题

JAVASCRIPT/jQuery代码


// all application logic is included inside the app() function    
const app = (projects) => {

    // creates a jQuery DOM element based on an individual project object
    const createProjectElement = (project) => {
        const $div = $('<div>').addClass("project")
        const $divOverlay = $('<div>').addClass("overlay")
        const $overlayText = $('<div>').addClass("overlayText").append($('<h2>').text(project.title))
        const $imageDiv = $('<div>').addClass("imageDiv").append($('<img>').attr('src', project.image))
        // $div.append($('<h2>').text(project.title))
        $div.append($($divOverlay).append($($overlayText).append($($imageDiv))))
        $div.append($('<p>').addClass("description").text(project.description))
        $div.append($('<button>').append($('<a>').addClass("list-group-item").attr('href', project.url).append($('<i>').addClass("fa fa-codepen").append($('<a>').addClass("small").text('Live Demo')))))

        return $div
    }

    // adds each project element to <body>
    projects.forEach(project => {
        const $projectDiv = createProjectElement(project)
        $('body').append($projectDiv)
    })

}

您的标记和样式可能是链接无法正常工作的原因。您已将两个链接相互打包，这将导致标记无效。我会使用“a”标签而不是按钮来创建链接

我尝试采用你的设计，得到了以下代码

var项目=[{
标题:"一号工程",，
图片：“https://”，
说明：“项目一说明”，
网址：'https://stackoverflow.com/'
}, {
标题:"第二计划",，
图片：“https://”，
说明：“项目二说明”，
网址：'https://stackoverflow.com/'
}];
//基于单个项目对象创建jQuery DOM元素
const createProjectElement=（项目）=>{
返回$（''）.addClass（'项目'）
.附加(
$（''）.addClass（'project-preview'）.append(
$（''）.addClass（'project-title'）.text（project.title），
$（''）.addClass（'project-overlay'），
$（“”）.addClass（'project-description'）.text（project.description），
$（''）.addClass（'project-link'）.attr（'href'，project.url.）.append(
$（''）.addClass（'fa-codepen'），
“现场演示”
)
)
;
}
//将每个项目元素添加到
projects.forEach（project=>{
$（'.project list'）.append（createProjectElement（项目））
})

。项目列表{
显示器：flex；
弯曲方向：立柱；
}
.项目{
最大宽度：250px；
利润率：35px自动；
文本对齐：居中；
背景色：#fff；
字体系列：“Pragati窄”，无衬线；
边框：1px实心#000；
}
.项目预览{
位置：相对位置；
溢出：隐藏；
}
.项目形象{
宽度：100%；
最小高度：160px；
}
.项目覆盖图{
位置：绝对位置；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.4）；
z指数：100；
}
.项目名称{
位置：绝对位置；
宽度：100%；
最高：50%；
保证金：0；
转化：translateY（-50%）；
颜色：#fff；
文本对齐：居中；
z指数：200；
}
.项目说明{
利润率：20px；
填充：0 20px；
}
.项目链接{
显示：内联块；
边缘底部：20px；
填充：8px 20px；
颜色：继承；
背景色：rgba（0,0,0,0.2）；
文字装饰：无；
边界：无；
边界半径：5px；
}
.project link.fa{
右边距：12px；
}

您的标记和样式可能是链接无法正常工作的原因。您将两个链接打包在一起，这导致标记无效。我将使用“a”标记而不是按钮创建链接

我尝试采用你的设计，得到了以下代码

var项目=[{
标题:"一号工程",，
图片：“https://”，
说明：“项目一说明”，
网址：'https://stackoverflow.com/'
}, {
标题:"第二计划",，
图片：“https://”，
说明：“项目二说明”，
网址：'https://stackoverflow.com/'
}];
//基于单个项目对象创建jQuery DOM元素
const createProjectElement=（项目）=>{
返回$（''）.addClass（'项目'）
.附加(
$（''）.addClass（'project-preview'）.append(
$（''）.addClass（'project-title'）.text（project.title），
$（''）.addClass（'project-overlay'），
$（“”）.addClass（'project-description'）.text（project.description），
$（''）.addClass（'project-link'）.attr（'href'，project.url.）.append(
$（''）.addClass（'fa-codepen'），
“现场演示”
)
)
;
}
//将每个项目元素添加到
projects.forEach（project=>{
$（'.project list'）.append（createProjectElement（项目））
})

。项目列表{
显示器：flex；
弯曲方向：立柱；
}
.项目{
最大宽度：250px；
利润率：35px自动；
文本对齐：居中；
背景色：#fff；
字体系列：“Pragati窄”，无衬线；
边框：1px实心#000；
}
.项目预览{
位置：相对位置；
溢出：隐藏；
}
.项目形象{
宽度：100%；
最小高度：160px；
}
.项目覆盖图{
位置：绝对位置；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.4）；
z指数：100；
}
.项目名称{
位置：绝对位置；
宽度：100%；
最高：50%；
保证金：0；
转化：translateY（-50%）；
颜色：#fff；
文本对齐：居中；
z指数：200；
}
.项目说明{
利润率：20px；
填充：0 20px；
}
.项目链接{
显示：内联块；
边缘底部：20px；
填充：8px 20px；
颜色：继承；
背景色：rgba（0,0,0,0.2）；
文字装饰：无；
边界：无；
边界半径：5px；
}
.project link.fa{
右边距：12px；
}

在

createProjectElement

中没有

return

语句，因此此代码不应在正文中添加任何内容。请参见编辑：我确实返回了$div，但我认为在我试图清理代码以问问题时，它被意外删除。请再次尝试回答，因为知道包含return，并且e按钮出现在实时站点上。谢谢！相关：我不知道为什么，但是

.overlyText

元素非常高，与上一个项目的

重叠。最后一个可以工作，因为它下面没有

.overlyText

可以干扰。在

createProjectElementreturn

语句ode>所以这段代码不应该在正文中附加任何内容。请参见编辑：我确实返回了$div，但我没有
.project {
    display:flex;
    flex-direction:column;
    text-align:center;
    margin:35px auto auto auto;
    border:2px solid black;
    width:250px;
    height:360px;
    background-color:white;
}

.overlay {
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    z-index:999;
    width:250px;
    margin-bottom:130px;
    margin-top:0px;
    background-color:white;
    height:90px;

}

.imageDiv { 
    position:relative;
    width:100%;
    z-index:-1;
}

h2 {
    position:relative;
    text-align:center;
    font-family:"Pragati Narrow";
    background-color:rgba(000, 000, 000, 0.2);
    padding-top:60px;
    padding-bottom:60px;
    color:white;
    z-index:999;
    top:190px;
    left:0 auto;
    width:100%;
}

img {
    width: 250px;
    height:160px;
    margin:10px auto;
}


button {
    background-color:rgba(000, 000, 000, 0.2);
    width:150px;
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    border-style:none;
    border-radius:5px;
    margin:15px auto;
    margin-top:5px;
    padding:6px;
}




.list-group-item {
    text-align:left;
    width:150px;
    font-size:25px;
    color:dimgrey;
    margin-left:25px;


}

.small {
    
    position:absolute;
    font-family:"Pragati Narrow";
    font-size:15px;
    margin-left:6px;
    margin-bottom:30px;
    margin-top:-5px;
    padding:10px 0px 20px 0px;

}