Question

*我并不懒惰-我读了很多支持线程，但不理解它们，也不知道如何推断我的代码。我对此并不陌生，不胜感激。 *

我已经从工作板上使用了API数据。我有数据渲染。我希望工作说明被隐藏，并且仅在用户单击按钮时显示。我正在尝试使用JQuery完成此操作。我已经尝试了一些JQuery代码，它可用于硬编码数据和alert（）。现在，我需要弄清楚如何使其与我使用的JSON格式的API数据一起使用。

使用JQuery，如何从json数据中获取职位描述，使其仅在单击按钮时显示？

我试图将description='';放在曾经的硬编码数据所在的位置，并添加了$(document.body).append(event.data.description);来呈现数据（代替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

预期结果是，单击该按钮时，它将显示完整的职位描述（不必在新窗口中打开）。

实际结果是，单击按钮时没有任何反应，并且在首次加载页面时没有工作说明。

任何指导将不胜感激！！非常感谢！

Answer 1

我们在这里。以下应作为一个不错的示例，说明如何在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');
});

如何使用JQuery点击事件来呈现JSON数据？

1 个答案: