*我并不懒惰 - 我已经阅读了许多支持线程，但不理解它们或知道如何推断我的代码。我是新手，我很感激善意的指导。 *
我从工作板上消耗了API数据。我有数据呈现。我希望隐藏作业说明，并仅在用户点击按钮时显示。我试图用JQuery完成这个。我已经尝试了一些JQuery代码，它使用硬编码数据和alert（）。现在，我需要弄清楚如何使用我使用的JSON格式的API数据。
使用JQuery，如何从我的json数据中获取作业描述，以便仅在单击按钮时显示？
我试图让description='';硬编码数据一次，我添加了$(document.body).append(event.data.description);to渲染数据（代替alert（）的位置）
这是JQUERY代码：
// JQUERY EVENT HANDLER
$(document).ready(function(){
$('#btnClickMe').on('click', {
description: '',
}, jobDesc);
function jobDesc(event)
{
$(document.body).append(event.data.description);
}
});
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>JQuery Testing</title>
</head>
<body>
<!-- DIV FOR CARD DISPLAY -->
<div id="root"></div>
<!-- CARD -->
<div class="container-fluid">
<div class = "card">
<input id="btnClickMe" type="button" value="Click Me"/>
</div>
</div>
</body>
</html>
这是我在codepen上的完整代码：https://codepen.io/CodeDuchess/pen/jRRvgy
预期的结果是，当单击按钮时，它将显示完整的作业说明（它不必在新窗口中打开）。
实际结果是，单击按钮时没有任何反应，并且在首次加载页面时存在作业说明。
任何指导将不胜感激!!非常感谢！！
开始了。以下应该作为如何在jQuery中完成所有这些工作的一个很好的例子。另请参阅此处工作示例的代码笔：https://codepen.io/xonosnet/pen/PgvaWq
CSS
.hidden {
display:none!important;
}
.card:hover {
cursor:pointer;
}
JS
'use strict';
//Clean up API URL to make it easy to configure.
var app = {
baseUrl : 'https://cors-anywhere.herokuapp.com/https://jobs.github.com/',
target: 'positions.json',
params : {
markdown:true,
location:'united states',
page:1,
count:20
},
url : '',
data : '',
root : $('#root')
};
app.url = app.baseUrl+app.target+'?'+$.param(app.params); //$.param() encodes the params object to be used in the http request.
app.root.append('<div class="container1"></div>'); //Easy way to append inline html to an existing element.
var container1 = $('.container1'); //Reference the newly created element by class using css selectors. You can reference elements by any attribute.
//$.getJSON() is a quick & easy way to retrieve JSON through an http request.
var request = $.getJSON(app.url, function(data) {
app.data = data; //This executes first
}).done(function() { //This executes second - This is called chaining.
console.log('[SUCCESS] Found '+app.data.length+' jobs!');
//$.each() will iterate objects & arrays.
$.each(app.data, function(index, job) {
const output = [
'<div class="card" data-id="">',
' <h2>'+job.title.substring(0, 40)+(job.title.length > 40 ? '...':'')+'</h2>',
' <h3>'+job.company+'</h3>',
' <h4>'+job.type+'</h4>',
' <h5>'+job.location+'</h5>',
' <p class="job-desc hidden">'+job.description.substring(0, 300)+(job.description.length > 300 ? '...':'')+'</p>',
'</div>'
]; // This is one among many ways to build out html. I chose this because it's cheap & clean.
container1.append(output.join('')); //Join the array into a string & append it to container1.
});
});
// This will toggle the "hidden" class of the child nodes of any card that you click.
// A cleaner way of showing job details rather than displaying a button.
$(document).on('click', '.card', function() {
var children = $(this).find('.job-desc');
children.toggleClass('hidden');
});
//If you still want to use a button, this is how you can do that.
//Assuming the following exists in each card: <button class="show-job-btn">Click Me!</button>
$(document).on('click', '.show-job-btn', function() {
var children = $(this).closest('.job-desc');
children.toggleClass('hidden');
});